有几个需求场景，需要中断或者取消请求，或者取消后再按照最新的参数去请求
- 例如新增一个任务，用户连续点击新增按钮，就会连续触发请求接口，所以需要去请求最后一个接口并中断所有以前的接口请求
- 例如在
h5上，上面有很多参数，切换一个，就去请求接口，那么连续切换二次，就会连续触发请求接口，如果第一次请求返回结果是2s，最后一次是1s，那么第一次请求的结果就会覆盖最后一次的，显示是不准确的，，所以需要去请求最后一个接口并中断所有以前的接口请求 - 例如下载一个文件，视频音频什么的，需求有中断下载的功能
第一和第二个场景可以在用户请求前判断是否在请求中，来
return false控制是否再次请求，但是第三个场景就不能了，就需要中断或者取消请求
以前用ajax的about来取消请求
const xhr = XMLHttpRequest();
xhr.open("get",url);
xhr.send();
// 取消请求
xhr.abort();
由于现在都是基于promise的fetch或者axios，所以ajax就不用了，那么AbortController中断取消请求就顺势而出了
来看下用法
const controller = new AbortController();
controller有个属性signal和方法abort
-
controller.signal需要设置在fetch请求中，这样我们就可以在外部终止这个请求了。相当于在fetch请求内部嵌入一个抓手，或者说预埋一个开关 -
controller.abort()终止请求的方法，如果请求没有完成就可以终止
下面举个创建任务的请求例子,用的fetch请求
fetch(url,{signal: controller.signal})将signal传进去
let controller = null;
let loading = false;
function createTask() {
// 如果正在请求中，就中断请求上一次的，然后去请求新的
if (loading) {
controller.abort();
}
// 构造新的AbortController对象
controller = new AbortController();
loading = true;
fetch(url,{
signal: controller.signal // 传入signal
}).then(response=>{
//第一次是连接服务器成功，然后去执行json方法，返回一个promise对象
loading = false;
return response.json();
}).then(response=>{
//请求服务器的结果
console.log(response)
}).catch(err=>{
loading = false;
console.log(err);
});
}
下面用
axios分别用get和post举个例子，来取消中断请求
-
axios get取消创建任务请求
let controller = null;
let loading = false;
function createTask() {
// 如果正在请求中，就中断请求上一次的，然后去请求新的
if (loading) {
controller.abort();
}
// 构造新的AbortController对象
controller = new AbortController();
loading = true;
axios.get(url,{
signal: controller.signal // 传入signal
}).then(response=>{
//请求成功
loading = false;
return response.json();
}).catch(err=>{
loading = false;
console.log(err);
});
}
-
axios post取消创建任务请求
let controller = null;
let loading = false;
function createTask() {
// 如果正在请求中，就中断请求上一次的，然后去请求新的
if (loading) {
controller.abort();
}
// 构造新的AbortController对象
controller = new AbortController();
loading = true;
axios.post(url,{
name: "张三",
age: 18
},{
signal: controller.signal // 传入signal
}).then(response=>{
//请求成功
loading = false;
return response.json();
}).catch(err=>{
loading = false;
console.log(err);
});
}
