有一个新的API用于从JavaScript发出请求:fetch()。是否有任何内置机制用于在飞行中取消这些请求
TL/DR:
自2017年9月20日起,fetch现在支持信号参数,但不支持
目前所有浏览器似乎都支持此功能
2020更新:大多数主流浏览器(Edge、Firefox、Chrome、Safari、Opera等)都支持该功能,这已成为DOM生活标准的一部分。(截至2020年3月5日)
不过,我们很快就会看到这一变化,因此您应该能够使用AbortControllersAbortSignal取消请求
长版本
如何:
其工作方式如下:
步骤1:创建一个中止控制器(目前我刚刚使用了这个)
const controller=new AbortController()
步骤2:您会得到如下中止控制器的信号:
const signal=controller.signal
步骤3:传递信号进行如下提取:
获取(urlToFetch{
方法:“get”,
信号:信号,//<;——这是我们的中止信号
})
步骤4:只要在需要时中止即可:
controller.abort()
下面是一个如何工作的示例(在Firefox 57+上工作):
<;脚本>;
//创建一个实例。
const controller=new AbortController()
常数信号=控制器信号
/*
//注册一个列表。
signal.addEventListener(“中止”,()=>{
log(“中止!”)
})
*/
函数beginFetching(){
log('Now fetching');
变量urlToFetch=”https://httpbin.org/delay/3";
获取(urlToFetch){
方法:“get”,
信号:信号,,
})
.然后(功能(响应){
log(`fetchcomplete.(未中止)`);
}).catch(函数(err){
错误(`Err:${Err}`);
});
}
函数abortFetching(){
log(“正在中止”);
//中止。
controller.abort()
}
</脚本>;
<;h1>;获取中止的示例</h1>;
<;人力资源>;
<;按钮onclick=“beginfitching();”>;
开始
</按钮>;
<;按钮onclick=“abortFetching();”>;
中止
</按钮>
资料来源:
- 已将AbortController的最终版本添加到DOM规范中
- fetch规范的相应PR现在已合并
- 跟踪AbortController实现的浏览器错误可在以下位置找到:Firefox:#1378342,Chromium:#750599,WebKit:#174980,Edge:#13009916