如何在 JavaScript 中中斷 HTTP 取得請求？

透過取消來中斷 HTTP 提取請求

JavaScript 中 fetch() 的引入徹底改變了 HTTP 請求處理，提供了通用且直觀的介面。然而，人們常常擔心是否能夠提前終止這些請求。

fetch() 中的中止機制

截至 2017 年 9 月，fetch() 引入了一項重大增強功能：支援訊號參數。此參數允許開發人員使用 AbortController 及其對應的 AbortSignal 取消請求。最初，瀏覽器支援有限，但現在（截至 2020 年 3 月），大多數主要瀏覽器（Edge、Firefox、Chrome、Safari、Opera 等）完全支援此功能。

實作

取消過程涉及四個步驟：

1. 建立一個AbortController:

const controller = new AbortController()

2. 取得AbortSignal:

const signal = controller.signal

3. 將訊號傳遞給 fetch():

fetch(urlToFetch, {
    method: 'get',
    signal: signal,
})

4. 中止隨時請求：

controller.abort();

範例

為了說明它在實務上的工作原理，請考慮以下範例：

// 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()
}

透過呼叫controller.abort ()，請求可以隨時中斷。

以上是如何在 JavaScript 中中斷 HTTP 取得請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！