如何取消HTTP fetch（）请求？

Question

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

Answer 1

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

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

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

长版

如何：

它的工作方式是这样的：

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

const controller = new AbortController()

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

const signal = controller.signal

第3步 ：您将传递为signal，例如：

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规范中
• 现在，将获取规范的相应PR合并。
• 跟踪AbortController的实现的浏览器错误可在此处找到：Firefox：＃1378342； Chromium：＃750599； WebKit：＃174980； Edge：＃13009916。