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 }) 

本文地址：https://blog.csdn.net/RkHker/article/details/109024561