使用方法如下：需要注意的是在get请求中CancelToken作为第二个参数传入，在post请求中CancelToken作为第三个参数传入
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
知道了使用方法后，最重要的我们是要搞清楚Cancel.Token的取消请求是怎么实现的，下面看一段源码 :
'use strict';
var Cancel = require('./Cancel');
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
if (this.reason) {
throw this.reason;
}
};
CancelToken.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};
module.exports = CancelToken;
从上面的代码可以看出在CancelToken这个类初始化的时候需要传递一个executor参数，在这个类的内部还创建了一个promise，然后定义了一个变量，把promise的resolve方法控制权放在了exexutor方法的执行体中。
这样做的目的是为了可以在外面控制promise的resolve。在promise的外部定义了一个resolvePromise 变量，在promise的内容将resolve赋值给了resolvePromise 这个变量，所以可以通过直接调用resolvePromise 来执行promise的resolve。
下面看下source这个方法同样的在这个方法中也定义了一个变量cancel，并且在这个方法内容new了一个CancelToken，并且传入一个参数c，并且将c赋值给了cancel，那么c又是代表的什么呢？
从上面代码可以看出，c就代表的是CancelToken类初始化的时候传入的executor，代码如下：
function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
}
也就是说将上面的这个方法赋值给了cancel，可以通过这个方法控制CancelToken内部的promise对象。
在sourse方法中，还有一个token，这个token是CancelToken这个类的一个实例，可以访问到CancelToken内部的promise。
这样封装的目的是为了能够分离promise和resolve方法，让用户可以自主调用resolve，一旦resolve就会触发promise的then，那promise的then又做了什么呢？
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();
reject(cancel);
// Clean up request
request = null;
});
}
可以看到当调用cancel方法后，会理解执行abort方法取消请求，同时调用reject让外层的promise的reject执行。
转载他人，非原创，感谢关注
————————————————
版权声明：本文为CSDN博主「海绵杨宝宝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41820577/java/article/details/102868824
