使用Typescript重构axios(二十二)——请求取消功能：收尾

2022-10-24 12:16:30

0. 系列文章

项目源码请猛戳这里!!!

1. 前言

到现在为止，官方axios取消请求功能我们已经实现了99%了，那么还有1%的功能没有完成，是什么呢？我们设想这样一个业务场景：有两个请求：请求1和请求2，这两个请求都受某个条件影响，也就是说，一旦这个条件成立，这两个请求都要被取消，亦或者说，当请求1发出后，此时突然该条件成立了，那么立即取消了请求1，而接下来请求2就不要再发了，而不是说请求2照样发出，只不过发出后被取消，请看如下demo所示：

const CancelToken = axios.CancelToken;

const source = CancelToken.source();

axios

  .get("/api/cancel", {

    cancelToken: source.token

  })

  .catch(function(e) {

    if (axios.isCancel(e)) {

      console.log(`请求取消原因：${e.message}`);

    }

  });

setTimeout(() => {

  source.cancel("Operation canceled by the user");

}, 1000);

setTimeout(() => {

  axios

    .get("/api/cancel", {

      cancelToken: source.token

    })

    .catch(function(e) {

      if (axios.isCancel(e)) {

        console.log(`请求取消原因：${e.message}`);

      }

    });

}, 1500);

请求1和请求2都受某个条件影响，请求1发出后1秒该条件突然成立随即取消请求，而1.5秒后请求2照样发出，接着被取消。这样显然是造成了资源浪费，因为我们明明知道该条件一旦成立了，请求2发出去也会被取消，那何不如干脆不发了，这样不更好吗？

接下来，我们就来优化这个缺点。其实也很简单，就是在发送请求前加条判断即可，首先判断当前是否配置了cancelToken，其次再判断取消原因reason是否存在，若果存在说明这个 cancelToken 已经被使用过了，我们就不发送这个请求，直接抛出异常即可，并且抛异常的信息就是我们取消的原因。

2. 添加throwIfRequested 方法

我们在CancelToken类里添加一个实例方法throwIfRequested ，该方法用来判断取消原因reason是否存在，如果存在，则直接抛出异常，并且把取消原因作为异常信息，如下：

export default class CancelToken {

    //...

    throwIfRequested():void{

        if (this.reason){

            throw this.reason

        }

    }

}

添加完之后别忘了在CancelToken类实例对象接口定义中添加该方法的接口定义：

export interface CancelToken {

  promise: Promise<Cancel>;

  reason?: Cancel;

  throwIfRequested(): void

}

完了之后，我们最后在发送请求前做次判断，判断是否配置了cancelToken，如果配置了进而再调用throwIfRequested方法判断取消原因是否存在。

3. 添加请求判断逻辑

我们在src/core/dispatchRequest.ts中的dispatchRequest方法中添加判断逻辑，如下：

function dispatchRequest(config: AxiosRequestConfig): AxiosPromise {

  throwIfCancellationRequested(config)

  processConfig(config);

  return xhr(config).then(res => {

    return transformResponseData(res);

  });

}

// 如果已经请求取消，则抛出异常。

function throwIfCancellationRequested(config:AxiosRequestConfig) {

  if (config.cancelToken) {

    config.cancelToken.throwIfRequested();

  }

}

发送请求前检查一下配置的 cancelToken 是否已经使用过了，如果已经被用过则不用法请求，直接抛异常。

这样一来，我们就把上面说的资源浪费的问题优化了，接下来，我们就编写demo来试试效果如何。

4. demo编写

我们继续沿用上面前言中分析的demo，运行结果如下：

从结果中我们看到，请求1发出1秒后被取消，接着请求2没有被发出，并且请求2中捕获到的异常也是请求原因异常，异常信息就是取消原因。

至此，官方axios请求取消功能就算是100%完成了。

（完）

码农公寓

0. 系列文章

1. 前言

2. 添加throwIfRequested 方法

3. 添加请求判断逻辑

4. demo编写

相关文章