web-dev-qa-db-ja.com

HTTP fetch（）リクエストをキャンセルするにはどうすればよいですか？

JavaScriptからリクエストを行うための新しいAPI：fetch（）があります。実行中のこれらのリクエストをキャンセルするためのメカニズムは組み込まれていますか？

javascriptajaxfetch-api
149
Sam Lee

TL/DR：

fetchは2017年9月20日の時点でsignalパラメーターをサポートするようになりましたが、すべてのブラウザーがこのatmをサポートしているとは限りません。

しかし、これはすぐに見られる変更であるため、AbortControllers AbortSignalを使用してリクエストをキャンセルできるはずです。

ロングバージョン

の仕方：

仕組みは次のとおりです。

ステップ1：AbortControllerを作成します（今のところは this を使用しました）

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>

ソース：

  • AbortController の最終バージョンがDOM仕様に追加されました
  • フェッチ仕様の 対応するPR がマージされました。
  • AbortControllerの実装を追跡するブラウザのバグは、ここで入手できます。Firefox： ＃1378342 、Chromium： ＃750599 、WebKit： ＃17498 、Edge：- ＃13009916 。
185
SudoPlz

既存のフェッチAPIでリクエストをキャンセルする方法はないと思います。 https://github.com/whatwg/fetch/issues/27 でそれに関する継続的な議論があります。

2017年5月更新：まだ解決策はありません。リクエストをキャンセルすることはできません。 https://github.com/whatwg/fetch/issues/447 でさらなる議論

58
spro

https://developers.google.com/web/updates/2017/09/abortable-fetch

https://dom.spec.whatwg.org/#aborting-ongoing-activities

// setup AbortController
const controller = new AbortController();
// signal to pass to fetch
const signal = controller.signal;

// fetch as usual
fetch(url, { signal }).then(response => {
  ...
}).catch(e => {
  // catch the abort if you like
  if (e.name === 'AbortError') {
    ...
  }
});

// when you want to abort
controller.abort();

edge 16（2017-10-17）、firefox 57（2017-11-14）、desktop safari 11.1（2018-03-29）、ios safari 11.4（2018-03-29）、chrome 67（2018-05）で動作します-29）以降。

古いブラウザでは、 githubのwhatwg-fetch polyfill および AbortController polyfill を使用できます。 古いブラウザを検出し、条件に応じてポリフィルを使用 もできます：

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import {fetch} from 'whatwg-fetch'

// use native browser implementation if it supports aborting
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetch
13
Jayen

2018年2月の時点で、fetch()は、Chromeで以下のコードでキャンセルできます（Firefoxサポートを有効にするには Readable Streamsを使用 をお読みください）。 catch()をピックアップしてもエラーはスローされません。これは、AbortControllerが完全に採用されるまでの一時的な解決策です。

fetch('YOUR_CUSTOM_URL')
.then(response => {
  if (!response.body) {
    console.warn("ReadableStream is not yet supported in this browser.  See https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream")
    return response;
  }

  // get reference to ReadableStream so we can cancel/abort this fetch request.
  const responseReader = response.body.getReader();
  startAbortSimulation(responseReader);

  // Return a new Response object that implements a custom reader.
  return new Response(new ReadableStream(new ReadableStreamConfig(responseReader)));
})
.then(response => response.blob())
.then(data => console.log('Download ended. Bytes downloaded:', data.size))
.catch(error => console.error('Error during fetch()', error))


// Here's an example of how to abort request once fetch() starts
function startAbortSimulation(responseReader) {
  // abort fetch() after 50ms
  setTimeout(function() {
    console.log('aborting fetch()...');
    responseReader.cancel()
    .then(function() {
      console.log('fetch() aborted');
    })
  },50)
}


// ReadableStream constructor requires custom implementation of start() method
function ReadableStreamConfig(reader) {
  return {
    start(controller) {
      read();
      function read() {
        reader.read().then(({done,value}) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          read();
        })
      }
    }
  }
}
6
AnthumChris

@sproが言うように、今のところ適切な解決策はありません。

ただし、処理中の応答があり、ReadableStreamを使用している場合は、ストリームを閉じて要求をキャンセルできます。

fetch('http://example.com').then((res) => {
  const reader = res.body.getReader();

  /*
   * Your code for reading streams goes here
   */

  // To abort/cancel HTTP request...
  reader.cancel();
});
3
Brad