axios cancelToken原理解析

参考博客：
https://blog.csdn.net/sinat_38959166/article/details/104173187
https://www.jianshu.com/p/e99cbfbce7e2

前言

最近在看一些库的原理，正好看到了axios cancel Promise的相关文章，理解后，以免忘记，写一篇博客记录一下。

用法

1.使用 CancelToken.source 工厂方法创建 cancel token

// CancelToken是一个构造函数，用于创建一个cancelToken实例对象
// cancelToken实例对象包含了一个promise属性，值为可以触发取消请求的一个promise
const CancelToken = axios.CancelToken;
// 执行source()得到的是一个包含了cancelToken对象和一个取消函数cancel()的对象
// 即 source = {token: cancelToken对象, cancel: 取消函数}
const source = CancelToken.source();

// 在请求的配置中配置cancelToken，那么这个请求就有了可以取消请求的功能
axios.get('/data', {
   
  cancelToken: source.token
}).catch(function(thrown) {
   
  if (axios.isCancel(thrown)) {
   
    console.log('Request canceled', thrown.message);
  } else {
   
     // 处理错误
  }
});

2.通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/data', {
   
  cancelToken: new CancelToken(function executor(c) {
   
    // executor 函数接收一个 cancel 函数作为参数
    // 把cancel函数传递给外面，使得外面能控制执行取消请求
    cancel = c;
  })
});

// cancel the request
cancel();

我的使用