如何取消HTTP fetch()请求?

有一个新的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(“中止”,()=&gt{
log(“中止!”)
})
*/
函数beginFetching(){
log('Now fetching');
变量urlToFetch=”https://httpbin.org/delay/3";
获取(urlToFetch){
方法:“get”,
信号:信号,,
})
.然后(功能(响应){
log(`fetchcomplete.(未中止)`);
}).catch(函数(err){
错误(`Err:${Err}`);
});
}
函数abortFetching(){
log(“正在中止”);
//中止。
controller.abort()
}
&lt/脚本>
<h1>获取中止的示例&lt/h1>
<人力资源>
<按钮onclick=“beginfitching();”>
开始
&lt/按钮>
<按钮onclick=“abortFetching();”>
中止
&lt/按钮&gt

资料来源:

  • 已将AbortController的最终版本添加到DOM规范中
  • fetch规范的相应PR现在已合并
  • 跟踪AbortController实现的浏览器错误可在以下位置找到:Firefox:#1378342,Chromium:#750599,WebKit:#174980,Edge:#13009916

发表评论