如何取消HTTP fetch（）请求？

  • Z时代
  • 2024-01-10
  • 分类：问答

有一个新的API用于从JavaScript发出请求：fetch（）。是否有任何内置的机制可以在飞行中取消这些请求？

回答：

TL / DR：

fetch现在支持signal截至2017年9月20日的参数，但目前 并非所有浏览器都支持此参数 。

大多数主流浏览器（Edge，Firefox，Chrome，Safari，Opera和其他一些浏览器）都支持该功能，该功能已成为DOM生活标准的一部分。（截至2020年3月5日）

这是我们很快就会看到的更改，因此您应该可以使用AbortControllers 取消请求AbortSignal。

长版

如何：

它的工作方式是这样的：

：您创建了一个AbortController（现在我只使用了这个）

const controller = new AbortController()

：您会收到AbortControllers信号，如下所示：

const signal = controller.signal

：您将传递为signal，例如：

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

：只要需要，就中止：

controller.abort();

这是一个工作原理示例（可在Firefox 57+上运行）：

<script>
    // Create an instance.
    const controller = new AbortController()
    const signal = controller.signal
    /*
    // Register a listenr.
    signal.addEventListener("abort", () => {
        console.log("aborted!")
    })
    */
    function beginFetching() {
        console.log('Now fetching');
        var urlToFetch = "https://httpbin.org/delay/3";
        fetch(urlToFetch, {
                method: 'get',
                signal: signal,
            })
            .then(function(response) {
                console.log(`Fetch complete. (Not aborted)`);
            }).catch(function(err) {
                console.error(` Err: ${err}`);
            });
    }
    function abortFetching() {
        console.log('Now aborting');
        // Abort.
        controller.abort()
    }
</script>
<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
    Begin
</button>
<button onclick="abortFetching();">
    Abort
</button>

资料来源：

  • AbortController的最终版本已添加到DOM规范中

  • 现在，将获取规范的相应PR合并。

  • 跟踪AbortController的实现的浏览器错误可在此处找到：Firefox：＃1378342； Chromium：＃750599； WebKit：＃174980； Edge：＃13009916。

以上是 如何取消HTTP fetch（）请求？ 的全部内容， 来源链接： utcz.com/qa/416975.html

回到顶部