最新版[email protected]取消请求-AbortController-初体验-番茄出品
start
-
前文提到,
axios
中的取消请求,包含两种方式:AbortController
;CancelToken
;
-
上篇文章讲解了
CancelToken
,今天这篇文章来了解一下AbortController
; -
作者:lazy_tomato
-
编写时间:2023/02/27 21/48
1. AbortController 是什么?
1.1 介绍
AbortController
接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。
1.2 MDN官方文档
MDN官方文档 点击这里:
1.3 官方文档使用案例
let controller;
const url = 'video.mp4';
const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');
downloadBtn.addEventListener('click', fetchVideo);
abortBtn.addEventListener('click', () => {
if (controller) {
controller.abort();
console.log('中止下载');
}
});
function fetchVideo() {
controller = new AbortController();
const signal = controller.signal;
fetch(url, {
signal })
.then((response) => {
console.log('下载完成', response);
})
.catch((err) => {
console.error(`下载错误:${
err.message}`);
});
}
1.3 兼容性
- 可以在
caniuse.com
中 查看到对AbortController
的解释;
Controller object that allows you to abort one or more DOM requests made with the Fetch API.
控制器对象,该对象允许您中止使用 Fetch API 发出的一个或多个DOM请求。
- 原生 AbortController 不支持 IE 全系列;
2. axios 中的 AbortController 如何作用
新版旧版差异:
由上图可以查看到:
-
axios
对旧版本的CancelToken
用法,还是保留了兼容处理; -
最新版本的
axios
,提供了对signal
属性的判断; -
在浏览器端,使用的都是 XMLHttpRequest 发起请求的;
3. 总结
总的来说,截至目前,1. AbortController
;2. CancelToken
;两者都可以实现取消请求。
-
底层逻辑相同:都是通过传入配置参数,再手动触发对应参数的取消方法。
-
差异:传入的配置对象不同。