使用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中，它还有一项非常重要的功能，就是支持主动取消请求。这个功能非常实用，我们可以想象这样一个业务场景：当请求发出后，突然出现了某种情况，此时发出的请求变得毫无意义，那么这个时候我们就可以调用取消请求的方法来主动取消发出的请求。

官方axios提供了两种取消请求的方式，示例如下：

• 第一种方式:

  可以使用CancelToken.source工厂创建取消令牌，如下所示：

  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  
  axios.get('/user/12345', {
    cancelToken: source.token
  }).catch(function (e) {
    if (axios.isCancel(e)) {
      console.log('Request canceled', e.message);
    } else {
      // handle error
    }
  });
  
  axios.post('/user/12345', {
    name: 'new name'
  }, {
    cancelToken: source.token
  })
  
  // cancel the request (the message parameter is optional)
  // 取消请求 (请求原因是可选的)
  source.cancel('Operation canceled by the user.');
  

• 第二种方式：

  还可以通过将取消函数传递给CancelToken的构造函数来创建取消令牌：

  const CancelToken = axios.CancelToken;
  let cancel;
  
  axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
      // An executor function receives a cancel function as a parameter
      // executor函数接收一个取消函数作为参数
      cancel = c;
    })
  });
  
  // cancel the request
  cancel();
  

所谓取消令牌cancelToken其实就是请求配置对象中的一个属性，该属性对应一个取消请求的触发函数，例如第一种方式中的source.cancel()，第二种方式中的cancel()。当在请求外部调用了该触发函数，表示此时需要取消请求了，那么我们此时调用XMLHttpRequest对象上的abort()方法将请求取消即可。

2. 示例代码分析

观察示例代码，我们从中可以总结出如下几点：

• axios混合对象上又多了一个静态接口CancelToken;
• CancelToken接口是一个类；
• CancelToken类的构造函数接收一个函数作为参数；
• 并且这个参数函数也接收一个取消函数作为参数；
• CancelToken类上有一个静态方法source;
• source方法返回一个对象：toekn和cancel；
• source.token其实就是CancelToken类的实例，source.cancel就是取消请求触发函数；
• axios混合对象上还多了一个静态接口isCancel;
• isCancel接口接收错误对象e作为参数，用来判断该错误是不是由取消请求导致的；

3. 小结

从示例代码分析中，我们可以知道，其实这两种使用方式在本质上都是一样的，都是用CancelToken类的实例作为取消令牌，不同之处在于：

• 第二种方式中我们需要显示的定义一个cancel变量和显示的实例化CancelToken类，并且把取消请求的触发函数赋给cancel，然后通过调用cancel()来取消请求；
• 而第一种方式是把变量cancel定义在了静态方法source内部，并且在source内部CancelToken类实例好，最后一并返回，这样我们就不用显示的实例化CancelToken类和定义cancel变量，取而代之的是使用source.token对应实例化CancelToken类，source.cancel对应触发函数cancel。

那么这两种方式孰好孰坏呢，或者说第一种方式明显比第二种方式使用起来更加方便，为什么还要第二种方式？其实不然，第一种方式将实例化CancelToken类的过程隐藏起来了，这样对仅仅只想取消请求来说是方便了，但是如果还想在取消请求的时候做一些其他事情，那就需要使用第二种方式，显示的实例化CancelToken类，然后做一些你需要做的事情。

OK，原理搞明白以后，我们就来实现取消请求的功能，我们先实现第二种方式，因为第一种方式其实是对第二种方式的一种高级包装罢了。

（完）