小编典典

如何取消HTTP fetch()请求?

javascript

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


阅读 736

收藏
2020-04-25

共1个答案

小编典典

TL / DR:

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>
2020-04-25