我如何取消HTTP fetch()请求？

19 浏览
0 Comments

我如何取消HTTP fetch()请求？

现在有一个全新的API可以从JavaScript中发起请求：fetch()。是否有内置机制来取消这些正在进行的请求呢？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

https://developers.google.com/web/updates/2017/09/abortable-fetch

https://dom.spec.whatwg.org/#aborting-ongoing-activities

// setup AbortController
const controller = new AbortController();
// signal to pass to fetch
const signal = controller.signal;
// fetch as usual
fetch(url, { signal }).then(response => {
  ...
}).catch(e => {
  // catch the abort if you like
  if (e.name === 'AbortError') {
    ...
  }
});
// when you want to abort
controller.abort();

在edge 16(2017年10月17日)，firefox 57(2017年11月14日)，桌面safari 11.1(2018年03月29日)，ios safari 11.4(2018年03月29日)，chrome 67(2018年05月29日)及更高版本中可用。

在较老的浏览器中，您可以使用github的whatwg-fetch polyfill 和 AbortController polyfill。您也可以有条件地检测旧的浏览器并使用polyfills：

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import {fetch} from 'whatwg-fetch'
// use native browser implementation if it supports aborting
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetch

0
0 Comments

TL/DR：

从2017年9月20日开始，fetch现在支持一个signal参数，但并不是所有的浏览器都支持此功能。

2020年更新：大多数主要浏览器（Edge，Firefox，Chrome，Safari，Opera和其他一些浏览器）支持此功能，它已成为DOM标准的一部分。（截至2020年3月5日）

这是我们很快将看到的变化，所以你应该能够通过使用AbortController的AbortSignal来取消请求。

详细版本

如何实现：

它的工作方式如下：

步骤1：创建一个AbortController（现在我只是使用了这个）

const controller = new AbortController()

步骤2：像这样获取AbortController的信号：

const signal = controller.signal

步骤3：将signal传递给fetch，如下所示：

fetch(urlToFetch, {
    method: 'get',
    signal: signal, // <------ This is our AbortSignal
})

步骤4：需要时中止请求：

controller.abort();

以下是如何实现的示例（在Firefox 57+上可用）：



Example of fetch abort

资料来源：

0