0. 系列文章

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

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

（完）

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

0. 系列文章

1. 前言

2. 示例代码分析

3. 小结