1. Introduction to interrupt requests

Recently, I encountered a problem in the project. When I sent the same request continuously, if the second request was faster than the first one, the data of the first request would actually be displayed, which would cause the inconsistency between the data and the content I selected. Solution: When sending a subsequent request, determine whether the previous request is complete (the same interface) and cancel it immediately if it is not. Then send a new request.

2. Principle of interrupt request

First of all, it’s clear that the underlying invocation of AXIOS is XMLHttpRequest.

The xmlHttprequest.abort () method terminates the interrupt request if it has already been issued. When a request is terminated, its readyState is set to xmlHttprequest.unsent (0) and the status of the request is set to 0.

A readyState property of 4 means that the request is complete, the client is no longer waiting for the server to return, and the status property is 0

3. Interrupt request in two ways

3.1 CancelToken constructor generationcancelfunction

Axios has a built-in CancelToken class, and new can be passed to a callback function that accepts a function called cancel. CancelToken will inject the CancelToken callback into the callback argument, which will be received externally using cancelCallback.

async searchCoupon() {
    try {
        // Cancel the previous request
        if (typeof this.cancelCallback === 'function') {
            this.cancelCallback('Operation canceled by the user.')
            this.cancelCallback = null
        }
        let [err, res] = await searchCoupon({
            data: this.searchCouponParam,
            cancelToken: new this.$axios.CancelToken(callback= > (this.cancelCallback = callback))
        })
        if (err) throw err
        this.bestCouponList = (res && res.list) || []
    } catch (error) {
        console.log(error)
    }
},
Copy the code

3.2 canceltoken.source () generates a cancellation tokentoken

data: {return {
        cancelTokenSource: null // Cancel the request}}// Coupon search
async couponSearch(val) {
    // If CancelTokenSource exists, cancel the request manually
    if (this.cancelTokenSource) {
        this.cancelTokenSource.cancel('cancel by hand')
        this.cancelTokenSource = null
    }
    const cancelToken = this.$axios.CancelToken
    this.cancelTokenSource = cancelToken.source()

    try {
        let [err, res] = await couponSearch({
            cancelToken: this.cancelTokenSource.token,
            data: {
                sku_ids: this.skuIds || ' '.keyword: this.useCode || ' '}})this.searchCouponList = res.list || []
    } catch (error) {
        console.error(error)
    }
}
Copy the code

4. Interrupt request encapsulation

// TODO

reference

Segmentfault.com/a/119000002…

Wangdoc.com/javascript/…

Segmentfault.com/a/119000003…

www.xiabingbao.com/post/reques…

Blog.csdn.net/weixin_4203…

Blog.csdn.net/xgangzai/ar…

Xie. Infoq. Cn/article / 160…