JS axios cancelToken 是如何实现取消请求？稍有啰嗦但超有耐心的 axios 源码分析
作者：互联网
壹 ❀ 引
axios，一个基于promise且对ajax进行了二次封装的http库，在提供了与promise类似的API便捷写法同时，它还有一大特点，便是支持取消http请求。当然取消请求并不是axios独有特性，它也只是对于XMLHttpRequest.abort()进行了内部封装。
我在如何做好一个基础的搜索功能？记一个因客户大数据量而导致的后发先至Bug一文中，对于文章问题给出的解决方案就有涉及到取消请求。虽然原生做法也能达到目的，但实际开发中我们不会用那么麻烦的写法，自然会借助三方http库，比如axios，而在这个库中，我们若需要取消请求，就得使用它的cancelToken，那么这个cancelToken到底是怎么做的呢？为什么一个简单的source.cancel调用请求就不会发起了？出于好奇，我简单阅读了axios对于cancelToken实现的相关源码，那么在这篇文章做个简单记录。
贰 ❀ 一个取消请求的例子
了解事情原貌最简单的做法就是写一个请求取消的例子，然后断点到axios中去阅读源码，因此我在本地项目准备了一个这样的例子，而本地项目请求接口容易跨域，为了解决这个问题，才有了React axios 使用 http-proxy-middleware 解决跨域问题小记这篇文章。所以这里我们就不多赘述，直接结合axios实现请求取消：
// 引用CancelToken
const CancelToken = axios.CancelToken;
// 调用CancelToken.source得到一个source实例，此实例包含token和cancel两个属性
const source = CancelToken.source();
// 请求接口时附带cancelToken:source.token,get与post有所区别，具体查看官方文档
axios.get('api/request', { cancelToken: source.token })
.catch(function (thrown) {
if (axios.isCancel(thrown)) {
alert(`Request canceled.${thrown.message}`);
}
});
// 通过source.cancel取消请求
source.cancel('Operation canceled by the user.');
上述代码中我们实现了一个简单接口取消请求，运行项目并打开控制台，发现并没发起request请求，且alert正常弹出。
而实现取消接口请求也比较简单，通过CancelToken.source()创建一个resoure实例：
// 单纯创建一个实例，不用于请求，让我们查看它
const source = CancelToken.source();
console.dir(source)
如图，此实例包含一个名为cancel的方法，接受一个message字段，也就你要取消请求时需要传递的理由，当然也可以不传。另外是一个token对象，它包含一个状态为pending的Promise对象（这个东西作用超级大，下文会解释这个Promise从哪来有什么用）。
取消请求的目的虽然达到了，可这几个方法像个黑盒，它里面到底发生了什么？没关系，让我们顺着上面请求取消的例子来一探究竟！
叁 ❀ cancelToken源码浅析
取消接口第一步创建resouce实例，它的源码在node_modules/axios/lib/cancel/CancelToken.js中可查看，代码如下：
/**
* 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.source()触发的就是上述代码，首先，我们可以看到此方法确实返回一个包含cancel与token两个属性的对象，让我们来看看执行过程。
首先，此方法创建了一个calcel变量，紧接着，又创建了一个token，而token的赋值结果是调用构造函数CancelToken得到，注意，此时我们在调用构造函数时，传递了一个function如下:
function executor(c) {
cancel = c;
}
你可以先不用思考它有什么用，就把这个函数理解成调用构造函数传递了一个实参，紧接着返回了一个包含上述两个属性的对象，对于source方法，它做的事情就这么简单，让我们紧接着看看构造函数CancelToken，代码如下：
/**
* A `CancelToken` is an object that can be used 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.');
}
// 其实就外层保存resolve方法
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);
// 在这里调用resolve方法，用于改变Promise状态
resolvePromise(token.reason);
});
}
OK，对于构造函数CancelToken，它接受一个参数executor，而这个参数其实就是上面提到的executor方法。接着，函数内声明了一个名为resolvePromise的变量。然后就是构造器属性this.promise，既然是构造器属性，那么这里可以预先知道，source方法中得到的token上一定有这个promise属性（上面截图已经展示了token中有个Promise），而这个属性又由一个Promise构造器创建。
new Promise方法做的事情很简单，在内部将resolve赋值给外部变量resolvePromise，我们都知道Promise接受一个callback，而callback内部可以使用resolve与reject两个方法，而上述所做的事仅仅是将Promise内部的resolve方法暴露出去，以达到在外层改变Promise状态的目的，比如：
// 外层定义一个变量用于保存promise内部的方法
let resolvePromise;
const p = new Promise((resolve, reject) => {
resolvePromise = resolve;
})
p.then((res) => {
console.log(res);// 我在外层改变promise状态
});
setTimeout(() => {
// 外层调用promise的resolve方法以达到改变promise状态目的
resolvePromise('我在外层改变promise状态')
}, 3000)
所以简单来说，通过这种做法我们将promise内部方法暴露出来，想在哪用就在哪用，大概如此。
让我们继续回到CancelToken方法，接着我们将this赋予给变量token，不要诧异，我们知道当new一个构造函数时，其实就是在隐式的给this赋值，然后返回这个this，而为了让这种绑定与返回更为可视化，常常有如下的写法：
function Fn(name){
const that = this;
that.name = name;
return that;
}
所以上面算是一种可视化做法，毕竟new CancelToken本身就是返回一个token并赋值给token，也相当于更好理解。
接着，我们执行了executor方法，它的参数又是一个函数，如下：
function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
// 在这里调用resolve方法，用于改变Promise状态
resolvePromise(token.reason);
}
同学们，还记得这个executor从哪来吗？它不就是new CancelToken时传递的函数吗：
function executor(c) {
cancel = c;
}
所以这个c其实就是上面传递给executor的cancel方法，而cancel = c这一句，目的跟上面resolve赋值给外层一样，也是将定义在CancelToken内部的cancel暴露出去。
你可能有点混乱了，其实这里一共做了三次方法暴露，第一次我们将resolve暴露出去，目的是让cancel中可以通过resolvePromise来改变Promise状态；而这个cancel也不是在定义的地方使用，这里又做了第二次暴露，将cancel抛出去赋予给了source方法，紧接着source做了第三次方法暴露，当我们开发者调用source将得到cancel与token两个属性。大致流程如下图：
那么到这里我们解释了source方法是如何产生的这两个属性，以及这两个属性分别有什么用。
所以当我们调用接口时，传递了一个source.token其实就是给这次请求绑定一个状态是pending的Promise，它更像是一个开发，一旦我们调用source.cancel就会启动这个开发，告知axios要取消这个请求，怎么取消的呢？
让我们找到node_modules/axios/lib/adapters/xhr.js这个文件，文章开头就说了axios是对于ajax的封装，而ajax又是对于XMLHttpRequest那一套的封装，所以回归本质，在xhr.js中我们可以看到发起请求所有的准备代码都在这里，这里大致贴一点代码并补了注释，我删掉了部分对于本身意义不大的代码：
return new Promise(function dispatchXhrRequest(resolve, reject) {
// 准备请求附带数据
var requestData = config.data;
// 准备请求头
var requestHeaders = config.headers;
// 创建xhr对象
var request = new XMLHttpRequest();
// 授权相关
if (config.auth) {
var username = config.auth.username || '';
var password = config.auth.password ? unescape(encodeURIComponent(config.auth.password)) : '';
requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
}
// 获取请求地址
var fullPath = buildFullPath(config.baseURL, config.url);
// 调用open，发起请求
request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
// 设置超时时间，你期望多久没反应就提示超时那就设置多少
request.timeout = config.timeout;
// OK，监听state状态，
request.onreadystatechange = function handleLoad() {
if (!request || request.readyState !== 4) {
return;
}
// 准备response数据体
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
settle(resolve, reject, response);
// 一旦请求结束，清空请求
request = null;
};
// 监听abort的处理
request.onabort = function handleAbort() {
};
// 监听error的处理
request.onerror = function handleError() {
};
// 监听超时后的处理
request.ontimeout = function handleTimeout() {
};
// 这里就是看我们有没有给请求附带cancelToken，如果带了就会走这里
if (config.cancelToken) {
// 还记得这里的promise知道是哪创建的吗？
config.cancelToken.promise.then(function onCanceled(cancel) {
// 两种情况，要么此时没请求，要么请求结束被清空为null，这里就不做处理，直接返回
if (!request) {
return;
}
// 这里调用了XMLHttpRequest.abort()
request.abort();
// 这里修改的是请求体自身promise的状态，而不是我们上文提到的那个promise
reject(cancel);
// 清空request，请求对象都不要了
request = null;
});
}
});
大家可以大致看看上述代码，这里我们抽离出最重要的一段：
// 这里就是看我们有没有给请求附带cancelToken，如果带了就会走这里
if (config.cancelToken) {
// 还记得这里的promise知道是哪创建的吗？
config.cancelToken.promise.then(function onCanceled(cancel) {
// 两种情况，要么此时没请求，要么请求结束被清空为null，这里就不做处理，直接返回
if (!request) {
return;
}
// 这里调用了XMLHttpRequest.abort()
request.abort();
// 这里修改的是请求体自身promise的状态，而不是我们上文提到的那个promise
reject(cancel);
// 清空request，请求对象都不要了
request = null;
});
}
config不用多说，其实就是我们使用axios发起请求时的配置，上文的例子也展示了，你要想取消请求，你就得给请求配置中加一个{ cancelToken: source.token }，而这个token中其实就是一个状态为pending的Promise，目的是什么我们也很清楚了。这个Promise就为了是跟当前请求进行绑定，它就像一颗遥控炸弹，而炸弹的开关就是 source.cancel，当我们调用cancel时，就会执行下面这个方法:
function cancel(message) {
if (token.reason) {
// Cancellation has already been requested
return;
}
token.reason = new Cancel(message);
// 启动炸弹
resolvePromise(token.reason);
}
方法里就干一件事，将跟请求绑定在一起的Promise的状态给改成resolve，一旦修改完成，那是不是就得跑下面这段代码：
config.cancelToken.promise.then(function onCanceled(cancel) {
// 两种情况，要么此时没请求，要么请求结束被清空为null，这里就不做处理，直接返回
if (!request) {
return;
}
// 这里调用了XMLHttpRequest.abort()
request.abort();
// 这里修改的是请求体自身promise的状态，而不是我们上文提到的那个promise
reject(cancel);
// 清空request，请求对象都不要了
request = null;
});
毕竟你Promise状态变了，那我then就得执行，执行了干什么？request.abort()也就是XMLHttpRequest.abort()取消请求，成功把这个请求给引爆炸掉了！！！
而abort干了什么呢？很遗憾，这个就彻彻底底是个黑盒了，是浏览器在帮我们处理，断点跟不进去，但通过MDN我们可以的值，当调用此方法时，如果请求已发出，那么该方法将中止请求。当一个请求被中止时，它 readyState被更改为 XMLHttpRequest.UNSENT(0) 并且请求的 status代码被设置为 0。
肆 ❀ 总
那么到这里，我们完整跟着请求代码把axios执行过程给讲了一遍，你会发现axios在内部其实就是创建一个名为token 的 Promise与一个改变Promise状态的方法cancel，当你需要取消一个请求时，那就把这个Promise与请求绑在一起，然后便可通过cancel改变请求上的Promise状态，从而达到取消请求的目的，不得不说这个三方库的作者那是真的牛妈妈给牛宝宝开门，牛到家了！！
另外，abort原生做法我测试发现若请求发出，是会取消请求，所以可以看到chrome控制台有红色的被取消的请求，而axios好家伙直接没请求，猜测应该是axios内部做了特殊处理，这点我就没再去研究了
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.send();
if (true) {
xhr.abort();
}
结合前面文章，我们就可以在简历中写通过axios.cancelToken解决XXX问题，若面试问你这个取消是怎么实现的。那真是不好意思，你算是撞到咱们的枪口上了，又可以愉快的跟面试官battle一番。OK，那么到这里，本文正式结束！！2点了！！睡觉！！
标签：function,axios,超有,请求,request,source,token,源码,cancel 来源： https://www.cnblogs.com/echolun/p/15204279.html