面试中有被问到fetch手动取消
可怜的我使用axios比较多，也只是copy代码没时间研究原理
今天有时间研究下
场景: 连续发送多次请求，只需要最后一次结果，模糊搜索，下载视频取消
axios中的请求中断
//VUE
sendStr() {
if(window.cancel) window.cancel()
let CancelToken = axios.CancelToken;
// let cancel
axios
.get(`http://localhost:3000/test?str=${this.searchStr}`, {
cancelToken: new CancelToken(function executor(c) {
window.cancel = c;
})
})
.then(res => {
window.console.log(res);
window.cancel = null
})
}
再相应间隔长的情况下，可以看到input事件中请求了五次，前几次都中断了，只保留最后一次
image.png
同样的方法，将后台定时器删掉，因为相应速度大于input事件触发间隔所以数据都成功返回
image.png
fetch手动中断
fetch是一种原生HTTP数据请求的方式，是xml的替代方案，和axios类似同样使用了 JavaScript Promises 来处理结果/回调:
AbortController对象
根据文档说明我们可以了解到
AbortController接口代表一个控制器对象，允许你在需要时中止一个或多个Web(网络)请求。
你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与Web(网络)请求的通信。
简单来说就是创建一个AbortController对象abortController，然后使用abortController.signal生成关联变量再添加到fetch请求参数中去，然后想要中断的时候使用关联该请求的abortController.abort()方法是使该请求中断
download() {
this.downloadController = new AbortController();
this.signal = this.downloadController.signal;
fetch(`http://localhost:3000/test?str=${this.searchStr}`, {
signal: this.signal
})
.then(res => {
window.console.log(res);
})
.catch(err => {
window.console.log(err);
});
},
termination() {
this.downloadController.abort();
}
中断如下
image.png
