axios之cancelToken原理以及使⽤
看axios⽂档的时候发现cancelToken这个东东，这个是⽤来取消ajax请求的，⼀般原⽣的话⽤的是abort()这个⽅法。看到这玩意的第⼀感觉是⽤起来有点⿇烦，但是看了内部实现，发现还是⽐较有意思的，今天就来分享⼀下。
基本使⽤
我们先来看看基本⽤法：
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
<('/ur/12345', {//get请求在第⼆个参数
cancelToken: ken
}).catch(function(thrown) {
我的变形金刚
});
axios.post('/ur/12345', {//post请求在第三个参数
name: 'new name'
}, {
cancelToken: ken
});
source.cancel('不想请求了');
注意，get请求的时候，cancelToken是放在第⼆个参数⾥；post的时候，cancelToken是放在第三个参数⾥。
我们可以发现，它要先引⽤axios.CancelToken，然后调⽤source()⽅法，会产⽣⼀个token和cancel，它的内部到底如何实现，这样做的⽬的是什么？
源码分析
压力大的说说现在我们来看看cancelToken的源码：
土头土脑
'u strict';
var Cancel = require('./Cancel');
/**
* A `CancelToken` is an object that can be ud to request cancellation of an operation.
*
* @class
发展党员政审* @param {Function} executor The executor function.
*/
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromi;
this.promi = new Promi(function promiExecutor(resolve) {
resolvePromi = resolve;
});
var token = this;
Tivoliexecutor(function cancel(message) {
if (ason) {
// Cancellation has already been requested
return;
}
玩游戏闪退怎么办
ason);
});
}
/**
* Throws a `Cancel` if cancellation has been requested.
*/
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
if (ason) {
ason;
}
};
/**
* Returns an object that contains a new `CancelToken` and a function that, when called,
* cancels the `CancelToken`.
*/
CancelToken.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};
通过源码我们可以发现，CancelToken这个类初始化的时候需要传递⼀个⽅法executor，并且它的内部新建了⼀个promi，最关键的是，它把promi的resolve⽅法控制权放在了executor⽅法⾥⾯！这种操作代表什么意思？我们看⼀个⼩例⼦：
let resolveHandle;
new Promi((resolve)=>{
resolveHandle=resolve;
}).then((val)=>{
console.log('resolve',val);
});伺蛇
resolveHandle('ok');
上⾯的例⼦中，我们⽤resolveHandle获取了⼀个promi的resolve⽅法的控制权，这样，我们就可以在外部控制这个promi的成功了。要知道new Promi返回的对象是⽆法从外部决定它成功还是失败的。
现在来看看source这个⽅法，我们可以看到，它new了⼀个CancelToken对象，并传了⼀个⽅法executor；采⽤相同的⼿法，⽤cancel变量将executor⽅法的变量c的控制权拿出来了，那么这个变量c⼜代表啥呢？
变量c正是我们前⾯说到的在CancelToken初始化时，传⼊executor⽅法的，也即：
function cancel(message) {
if (ason) {
// Cancellation has already been requested
return;
}
ason);
}
也就是说cancel代表的是上⾯的这个⽅法，有了这个⽅法，就可以在外部控制CancelToken内部的promi对象了。
在source⽅法中，除了cancel，还有⼀个token，这个token是CancelToken类的⼀个实例，可以访问到内部的promi。
因此CancelToken类如此封装的主要⽬的就是为了能够分离promi和resolve⽅法，让⽤户可以⾃⼰调⽤resolve⽅法。⼀旦resolve后，就会触发promi的then⽅法，现在看看内部promi后的then⽅法是什么：
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promi.then(function onCanceled(cancel) {
if (!request) {
return;
}
系统总体设计request.abort();
reject(cancel);
// Clean up request
request = null;
});
}
上⾯是xhr.js的关于cancelToken部分相关代码，可以看到，当⽤户调⽤cancel后，就会⽴即执⾏abort⽅法取消请求，同时调⽤reject让外层的promi失败。
