2021-03-09|2021-03-09 Axios cancelToken学习使用
【2021-03-09|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
})
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- axios配置和实现请求中断
- FormData加axios实现图片上传（多图）
- vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
- vue第2天（vue生命周期钩子、日期格式化库|vue第2天（vue生命周期钩子、日期格式化库 moment.js、vue计算属性、网络请求库axios）
- Axios 源码解读 —— 源码实现篇
- axios-api，js结构化定义、调用业务api接口。