JavaScript で HTTP フェッチリクエストを中断するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で HTTP フェッチリクエストを中断するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-23 05:19:08

オリジナル

1041 人が閲覧しました

How Can I Interrupt HTTP Fetch Requests in JavaScript?

キャンセルによる HTTP フェッチリクエストの中断

JavaScript での fetch() の導入により、HTTP リクエストの処理に革命が起こり、多用途で直感的なインターフェイスが提供されました。ただし、これらのリクエストを途中で終了する機能に関して懸念が生じることがよくあります。

fetch() の中止メカニズム

2017 年 9 月の時点で、fetch() には重要な機能拡張が組み込まれています。つまり、signal パラメーターのサポートです。。このパラメータを使用すると、開発者は AbortController とそれに対応する AbortSignal を使用してリクエストをキャンセルできます。当初、ブラウザのサポートは限定的でしたが、現在 (2020 年 3 月現在) ほとんどの主要なブラウザ (Edge、Firefox、Chrome、Safari、Opera など) がこの機能を完全に採用しています。

実装

キャンセルプロセスには 4 つのステップが含まれます:

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 中国語 Web サイトの他の関連記事を参照してください。