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 等操作。

标签：
阅读(2203)

公众号：

qrcode

微信公众号：前端小茶馆

相关文章

如何实现 axios 的自定义适配器 adapter (2020/10/22)
useState 与 requestAnimationFrame 实现的useAnimationFrame (2020/11/02)
axios 源码系列之拦截器的实现 (2020/11/14)
必然会用到的 axios 中自带的工具方法 (2020/11/17)
真没必要再对 axios 进行过度的封装 (2022/03/18)

公众号：

qrcode

微信公众号：前端小茶馆