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

0. 系列文章

1.使用Typescript重构axios(一)——写在最前面

2.使用Typescript重构axios(二)——项目起手，跑通流程

3.使用Typescript重构axios(三)——实现基础功能：处理get请求url参数

4.使用Typescript重构axios(四)——实现基础功能：处理post请求参数

5.使用Typescript重构axios(五)——实现基础功能：处理请求的header

6.使用Typescript重构axios(六)——实现基础功能：获取响应数据

7.使用Typescript重构axios(七)——实现基础功能：处理响应header

8.使用Typescript重构axios(八)——实现基础功能：处理响应data

9.使用Typescript重构axios(九)——异常处理：基础版

10.使用Typescript重构axios(十)——异常处理：增强版

11.使用Typescript重构axios(十一)——接口扩展

12.使用Typescript重构axios(十二)——增加参数

13.使用Typescript重构axios(十三)——让响应数据支持泛型

14.使用Typescript重构axios(十四)——实现拦截器

15.使用Typescript重构axios(十五)——默认配置

16.使用Typescript重构axios(十六)——请求和响应数据配置化

17.使用Typescript重构axios(十七)——增加axios.create

18.使用Typescript重构axios(十八)——请求取消功能：总体思路

19.使用Typescript重构axios(十九)——请求取消功能：实现第二种使用方式

20.使用Typescript重构axios(二十)——请求取消功能：实现第一种使用方式

21.使用Typescript重构axios(二十一)——请求取消功能：添加axios.isCancel接口

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

23.使用Typescript重构axios(二十三)——添加withCredentials属性

24.使用Typescript重构axios(二十四)——防御XSRF攻击

25.使用Typescript重构axios(二十五)——文件上传下载进度监控

26.使用Typescript重构axios(二十六)——添加HTTP授权auth属性

27.使用Typescript重构axios(二十七)——添加请求状态码合法性校验

28.使用Typescript重构axios(二十八)——自定义序列化请求参数

29.使用Typescript重构axios(二十九)——添加baseURL

30.使用Typescript重构axios(三十)——添加axios.getUri方法

31.使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法

32.使用Typescript重构axios(三十二)——写在最后面（总结）

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

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%完成了。

（完）