如何在 JavaScript 中中断 HTTP 获取请求？-js教程-PHP中文网

如何在 JavaScript 中中断 HTTP 获取请求？

Susan Sarandon

发布： 2024-11-23 05:19:08

原创

1045 人浏览过

How Can I Interrupt HTTP Fetch Requests in JavaScript?

通过取消来中断 HTTP 提取请求

JavaScript 中 fetch() 的引入彻底改变了 HTTP 请求处理，提供了通用且直观的界面。然而，人们常常担心是否能够提前终止这些请求。

fetch() 中的中止机制

截至 2017 年 9 月，fetch() 引入了一项重大增强功能：支持信号参数。此参数允许开发人员使用 AbortController 及其相应的 AbortSignal 取消请求。最初，浏览器支持有限，但现在（截至 2020 年 3 月），大多数主要浏览器（Edge、Firefox、Chrome、Safari、Opera 等）完全支持此功能。

实现

取消过程涉及四个步骤：

创建一个AbortController:

const controller = new AbortController()

登录后复制

获取 AbortSignal:

const signal = controller.signal

登录后复制

将信号传递给 fetch():

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

登录后复制

中止随时请求：

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中文网其他相关文章！