注意：此方法（CancelToken），官方已经不推荐，推荐去看官网的方法
示例代码：
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’
let cancel;
btn1.onclick = async () => {
axios({
url:'http://localhost:5000/test1?delay=3000',
cancelToken: new CancelToken((c)=>{ //c是一个函数，调用c就可以关闭本次请求
cancel = c;
})
}).then(
response =>{console.log('成功了',response);},
error =>{console.log('失败了',error);}
)
}
btn2.onclick = () =>{
cancel();
}
</script>
</body>
步骤操作：
1.首先定义一个 CancelToken 来接收 axios 中 CancelToken 主要是为了’打标识
const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’
2.然后定义一个 cancel 变量
let cancel;
3.在 axios 对象中配置 cancelToken：
cancelToken: new CancelToken((c)=>{ //c是一个函数，调用c就可以关闭本次请求 cancel 的缩写
cancel = c;//赋值给外面的变量cancel 提升c的作用域？
})
4.最后绑定在某个事件发生后想取消请求时调用：
//笔记中所写的事件为点击事件 任何事件都可以
btn2.onclick = () =>{
cancel();
}
优化取消请求（细化错误问题）：
说明：点击取消请求时，axios也会去失败的回调，但这不是服务器的错误导致的，是用户自身不需要本次请求，所以需要对于错误进行划分。以及如果用户反复点击，会发出多次请求，单只需要一次请求。
示例代码：
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’
let cancel;
btn1.onclick = async () => {
if(cancel) cancel();//避免多次反复请求
axios({
url: 'http://localhost:5000/test1?delay=3000',
cancelToken: new CancelToken((c) => { //c是一个函数，调用c就可以关闭本次请求
cancel = c;
})
}).then(
response => { console.log('成功了', response); },
error => {
if (isCancel(error)) {
//如果进入判断，证明：是用户取消了请求
console.log('用户取消了请求，原因是', error.message);
} else {
console.log('失败了', error);
}
}
)
}
btn2.onclick = () => {
cancel("任性，我就是不想要了");
}
</script>
</body>
解释：cancel 函数可在括号中添加说明，在进入失败的回调时进行判断是服务器端发出的，还是用户自己取消的。
axios 请求拦截器中使用取消请求：
示例代码：
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">取消请求</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’
let cancel;
//请求拦截器
axios.interceptors.request.use(config => {
if(cancel) cancel('取消了');
config.cancelToken =new CancelToken((c)=> cancel = c);
//c是一个函数，调用c就可以关闭本次请求
return config;
});
//响应拦截器
axios.interceptors.response.use(response => {
return response.data;
},error => {
if (isCancel(error)) {
//如果进入判断，证明：是用户取消了请求
console.log('用户取消了请求，原因是', error.message);
} else {
console.log('失败了', error);
}
return new Promise(()=>{});
});
//进行简化
btn1.onclick = async () => {
const result = await axios.get('http://localhost:5000/test1?delay=3000');
console.log(result);
}
btn2.onclick = () => {
cancel("我不想要了");
}
</script>
</body>
axios 批量发送请求：
使用了axios.all( ) 的API，括号中为数组，其中写需要并发的请求。
<body>
<button id="btn1">点我获取测试数据</button>
<script>
const btn1 = document.getElementById('btn1');
btn1.onclick = async () => {
axios.all([
axios.get('http://localhost:5000/test1'),
axios.get('http://localhost:5000/test2'),
axios.get('http://localhost:5000/test3'),
]).then(
response =>{console.log(response);},
error =>{console.log(error);}
)
};
</script>
</body>
解释：Axios.all( ) 基于 promise.all( )，所有的都是成功的回调才会返回数据，如果有一个失败的回调，就会走错误信息。此方法会按顺序打印 并发的三个请求的数据，并且如果用了延迟请求也会是原本的顺序，这是 axios 封装好的。
本文转载自: https://blog.csdn.net/zqlbanzhuan/article/details/128135101
版权归原作者 Allen·s 所有， 如有侵权，请联系我们删除。
版权归原作者 Allen·s 所有， 如有侵权，请联系我们删除。