Two articles were analyzed earlier

  • Request flow analysis, portal, stamp here;
  • Interceptor analysis, portal, stamp here;

In this article, we will analyze how the cancellation request is implemented, starting with a simple cancellation request example:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/get? name=xmz', {
    cancelToken : source.token
}).then((response) = >{
    console.log('response', response)
}).catch((error) = >{
    if(axios.isCancel(error)){
        console.log('Cancel message delivered by request', error.message)
    }else{
        console.log('error', error)
    }
})
// Cancel the request
source.cancel('Cancel request to deliver this message');
Copy the code

This is a simple example of canceling the request, so start with axios.CancelToken and go to the axios/lib/axios.js file first.

axios.CancelToken = require('./cancel/CancelToken');
Copy the code

Effortlessly, he found the CancelToken, in case we call the source method, and then go axios/lib/cancel/CancelToken js file to see the source method is stem what of?

CancelToken.source = function(){
    var cancel;
    var token = new CancelToken(function executor(c) {
        cancel = c
    })
    return {
        token : token,
        cancel : cancel
    }
}
Copy the code

The source method is simple. It simply returns an object with token and Cancel attributes, but both token and cancel are derived from the CancelToken constructor. Look up in this file to find the CancelToken function.

function CancelToken (executor){
    // ...
    Executor is a function, or an error is reported
    var resolvePromise;
    this.promise = new Promise(function(resolve){
        resolvePromise = resolve;
    })
    var token = this;
    // The token above now has a promise property, which is an unsuccessful promise object;
    executor(function cancel(message){
        if(token.reason){
            return;
        }
        token.reason = new Cancel(message);
        resolvePromise(token.reason);
    })
    // The cancel function is the same as the one above, source.cancel;
}
Copy the code

Now that you know source.cancel is a function and souce.token is an instantiation object, that’s all for now. Continue with the example at the beginning of this article.

Souce. cancel is the function used to trigger the cancellation request.

Now in retrospect, the above cancel function, cancel, add a tiny attribute to token, then see what is under the reason attribute, see this cancel the constructor, in axios/lib/cancel/cancel js file

function Cancel(message){
    this.message = message
}
Copy the code

Cancel in particular is simply adding a message attribute to the instantiated object, so token.reason is now an object with a message attribute.

Returning to the cancel function, the resolvePromise function executes, and the token.promise object, which had not become a success promise, becomes a success promise and passes the token.reason object.

To summarize, by executing the cancel function, the token’s promise state becomes a success;

All right, so all of a sudden the analysis breaks, becomes successful and what happens? How did it cancel? Although the synchronization code is now complete, the request has not yet been sent. We need to look at the function that sends the request, which was analyzed in the previous article. Portal, stamp here.

CancelToken cancelToken cancelToken cancelToken cancelToken cancelToken cancelToken cancelToken cancelToken cancelToken To axios/lib/adapters/XHR. Explore in js (here only part of the interception of cancelToken).

CancelToken cancelToken cancelToken cancelToken cancelToken cancelToken cancelToken
if(config.cancelToken){
    // How to cancel is defined in this judgment;
    config.cancelToken.promise.then(function(cancel){
        request.abort();
        reject(cancel);
        request = null; })}// Send the request
request.send(requestData);
Copy the code

If you look carefully, this is just a then function for a promise, and it will only execute if the state of the promise becomes successful, and as we’ve just analyzed, cancel is what makes the state of the promise become successful, so if you execute, cancel the request, the then will execute, cancel sending the request, And change the promise that sends the request to reject, which is caught by axiox.get().catch();

Now that the process is clear, here’s a final summary:

Perform cancel to make the token’s promise successful. Verify that the token. Promise status has changed before the request is actually sent, and if so, cancel the request.