JavaScript で実行中の `fetch()` リクエストをキャンセルするにはどうすればよいですか?

インフライト HTTP fetch() リクエストのキャンセル

JavaScript からリクエストを行うための fetch() API の出現により、そのキャンセル メカニズムに関する疑問が生じています。 -フライトのリクエスト。歴史的には、組み込みオプションはありませんでした。ただし、最近の更新でリクエストをキャンセルするためのパスウェイが導入されました。

AbortController の使用

2017 年 9 月 20 日より、fetch() はシグナル パラメータをサポートするようになり、 AbortControllerとの組み合わせ。次の手順はプロセスの概要です:

1. AbortController オブジェクトを作成します:

   • constコントローラー = new AbortController()

2. AbortController のシグナルを取得します:

   • const signal =controller.signal

3. シグナルを fetch() に渡します:

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

4. 必要に応じてリクエストを中止します:

   • controller.abort()

使用例

次の例を考えてみましょう (Firefox 57 と互換性があります):

// Create an AbortController instance.
const controller = new AbortController();
const signal = controller.signal;

function beginFetching() {
  console.log('Now fetching');
  fetch("https://httpbin.org/delay/3", {
    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 the request.
  controller.abort();
}

この例では、「開始」ボタンをクリックするとリクエストが開始され、「中止」ボタンをクリックするとリクエストが完了する前に終了します。

以上がJavaScript で実行中の `fetch()` リクエストをキャンセルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。