javascript - 如何取消 HTTP fetch() 请求？

Question

有一个用于从 JavaScript 发出请求的新 API:fetch() .是否有任何内置机制可以在进行中取消这些请求？

Answer 1

TL/DR:

自 2017 年 9 月 20 日起，

fetch 现在支持 signal 参数，但不支持 目前所有浏览器似乎都支持这一点。

2020 年更新:大多数主要浏览器(Edge、Firefox、Chrome、Safari、Opera 等)support the feature ，已成为 the DOM living standard 的一部分. (截至 2020 年 3 月 5 日)

这是我们很快就会看到的变化，因此您应该能够通过使用 AbortControllers AbortSignal 来取消请求。

加长版

如何:

它的工作方式是这样的:

第 1 步:创建一个 AbortController(目前我只使用了 this)

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+):

<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 规范中
• corresponding PR提取规范现已合并。
• 可在此处找到跟踪 AbortController 实现的浏览器错误:Firefox:#1378342 , Chrome : #750599 , WebKit: #174980 ，边:#13009916 .