2021-03-09 Axios cancelToken学习使用

参考axios官网
官网的有点难理解，自己看官方文档也搞了好久才明白，以下是我的总结。

axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式

1、axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

cancel();

2、CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性，用于标记请求和一个cancel方法，用于取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
})

source.cancel();

3、cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(err => {
  // 这里主要是判断这个错误是取消请求导致的还是其他原因导致的
  if (axios.isCancel(thrown)) {
    console.log(err.message);
  }
});

// 取消请求（message 参数是可选的）
source.cancel('不要再点啦');

4、其他还要注意get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面。

axios.get('/user', {
  cancelToken: source.token
})

axios.post('/user', {
  name: 'new name'
}, {
  cancelToken: source.token
})