axios 源码系列之如何取消请求

蚊子前端博客
发布于 2020-11-25 19:29
在axios中,我们可以根据特定情况来主动取消某个请求,那么这种方式是怎么操作的?实现的原理又是什么呢?

我们在前后端交互的过程中,通常是通过请求接口来实现的,而一个页面中的交互又非常复杂,例如需要多次频繁请求同一个接口,或者在接口还没返回时就要切换路由等。这些都需要对接口请求的时机或者请求接口之后进行处理,避免一些无用的请求或者接口返回顺序的差异。

  1. 防抖:在用户快速地交互过程中,只使用最后一次交互产生的数据,然后再发起请求,例如频繁的切换 tab,或者快速输入数据等;

  2. 锁状态:在上一个接口没有返回数据时,交互状态一直处于 loading 的锁定状态,直到数据正确返回或者超时等异常;

  3. 取消上一个请求:在发起下一个请求前,把之前的请求取消掉;

前两种方式,是在发起请求前进行控制,即控制发起请求的时机,而当请求发出之后则不再控制;而最终一种方式则是取消中断还在路上的请求,然后再发起一个新的请求,不用管发起的时机。这几种方式也要看业务的需要,选择最适合的即可。

不要停-蚊子的博客-蚊子的前端博客

我们在之前的如何实现 axios 的自定义适配器 adapter文章里,略过了 axios 是如何主动取消当前请求的。今天我们就将一下在 axios 中如何取消之前发起的请求,源码中又是怎样实现的。

1. 主动取消之前发起的请求

我们先来看下 axios 中取消请求的用法:

COPYJAVASCRIPT

const CancelToken = axios.CancelToken; // 返回两个字段,{ token, cancel } // token用于表示某个请求,是一个Promise类型 // cancel是一个方法,当被调用时,则取消token注入的那个请求 const source = CancelToken.source(); axios .get('/user/12345', { cancelToken: source.token, // 将token注入到请求中 }) .catch(function (thrown) { // 判断是否是因主动取消导致的 if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error console.error(thrown); } }); axios.post( '/user/12345', { name: 'new name', }, { cancelToken: source.token, } ); // 主动取消请求 // cancel方法会把注入的同一个token的请求方法一并取消掉 // 上面的get和post请求都会被取消掉 // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');

从 demo 上来看,用法很简单,token 和 cancel 的关系对应上即可。

官方例子中还有一种取消请求的方式,这个我们放在后面讲,更容易理解一些。

2. 源码解析

取消请求的方法在 https://github.com/axios/axios/tree/master/lib/cancel 的目录中,3 个文件:

  • Cancel: Cancel 类,message 和__CANCEL__属性,用于标识取消的某个请求;

  • isCancel: 判断当前参数是否是 Cancel 的实例;

  • CancelToken: 主流程,创建 Cancel 实例和取消的方法;

我们主要来看下 CancelToken 中的整个流程。

看你能说什么-蚊子的博客-蚊子的前端博客

2.1 source 方法

source 作为取消请求的入口,我们就先来看下 source 方法。

COPYJAVASCRIPT

// 创建token和cancel方法 CancelToken.source = function source() { var cancel; // token为 CancelToken 的实例,包含 promise 和 reason 两个属性 // 同时把 executor 中的参数给到 cancel // 即CancelToken有一个回调函数,而这个回调函数的参数也是一个函数 // CancelToken怎么执行,我们接着看! var token = new CancelToken(function executor(c) { cancel = c; }); return { token: token, cancel: cancel, }; };

2.2 CancelToken

CancelToken 用来取消请求,但我理解起来,思路非常的绕,我们一点点来剖析:

COPYJAVASCRIPT

function CancelToken(executor) { if (typeof executor !== 'function') { throw new TypeError('executor must be a function.'); } // 创建一个Promise的实例, // 当resolvePromise执行时,this.promise变为fulfilled状态 var resolvePromise; this.promise = new Promise(function promiseExecutor(resolve) { resolvePromise = resolve; }); // new一个实例时,会立即执行CancelToken的回调函数executor方法 // executor的参数也是一个函数,即上面的cancel就是当前的cancel函数体 // 当executor的回调函数cancel执行时,会给当前CancelToken创建一个reason属性,这个属性是Cancel的实例 // 并执行resolvePromise方法,将reason实例穿进去;执行后this.promise变为fulfilled状态 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 的实例 token,同时,将 CancelToken 中回调函数的参数给到了 cancel。当 cancel 执行时,则 token 中的 promise 属性则会从 pending 状态变为 fulfilled 状态,那么 promise 上挂载的then()方法也就可以继续执行了。

2.3 adapter

在调用 cancel 方法后,请求中是怎么操作的呢?我们看下adapter/xhr.js中的代码:

COPYJAVASCRIPT

if (config.cancelToken) { // config.cancelToken就是上面创建的token // 当token.promise变为fulfilled状态后,就可以执行后续的链式操作 // Handle cancellation config.cancelToken.promise.then(function onCanceled(cancel) { if (!request) { return; } // 取消当前的请求 request.abort(); // 将Cancel的实例cancel给到reject reject(cancel); // Clean up request request = null; }); }

当我们使用 axios 的 catch 捕获内部抛出的异常时,就可以通过isCancel判断是否是因主动取消请求导致的异常:

COPYJAVASCRIPT

axios .get('/user/12345', { cancelToken: source.token, // 将token注入到请求中 }) .catch(function (thrown) { // 判断是否是因主动取消导致的 if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error console.error(thrown); } });

现在再来看下 cancel 执行的整个流程,就会清晰流畅很多。

axios的cancel解析-蚊子的前端博客

3. 取消请求的另一种方式

我们在第 1 节还留着一个问题,axios 取消请求还有另一种方式,即直接使用 CancelToken 类。

  1. token: 我们在上面的 source()方法中就能看到,传给 axios 参数的 token 就是 CancenToken 的实例,这里直接使用new CancelToken()的返回值也是可以的;

  2. cancel: source()中的 cancel 就是 CancelToken 的回调函数 executor 的回调函数;

COPYJAVASCRIPT

const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { // CancelToken创建的 cancelToken: new CancelToken(function executor(c) { // An executor function receives a cancel function as a parameter cancel = c; }), }); // cancel the request cancel();

其实我们发现,source()方法,只是给我们额外又封装了一下,简单的返回了 token 和 cancel,但本质还是 CancelToken 中的东西。

呦呦呦-蚊子的博客-蚊子的前端博客

4. 总结

在取消请求的过程中,token 要和 cancel 方法保持对应关系,即都在一个对象里;若其他的请求也要取消时,可以额外再生成一组 token 和 cancel。同时,这里还用到了 Promise 的一个机制,只有在当前 Promise 变更为 fulfilled 状态后,才能执行后面的 then 等操作。

标签:
阅读(1569) 评论(3)

公众号:

qrcode

微信公众号:前端小茶馆