axios.CancelToken官方文档：
使用方法如下：需要注意的是在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