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

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

（完）

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did223417

更新时间：2023-05-08 阅读：61次