ReadableStream.cancel()

ReadableStream インターフェイスの cancel() メソッドは、関連付けられたストリームをキャンセルします。 提供された reason パラメーターは、基になるソースに与えられ、使用する場合と使用しない場合があります。

キャンセルは、ストリームを完全に終了し、読み取り待ちのチャンクがキューに入れられている場合でも、それ以上データを必要としない場合に使用します。 キャンセルが呼び出された後、そのデータは失われ、ストリームは読み取り不能になります。 これらのチャンクをまだ読み取り、ストリームを完全に取り除くわけではない場合は、ReadableStreamDefaultController.close() を使用します。

構文

var promise = readableStream.cancel(reason);

パラメーター

reason
人間が読むことができるキャンセルの理由を提供する DOMString

戻り値

Promisereason パラメーターで指定された値で満たされます。

例外

TypeError
キャンセルしようとしているストリームは ReadableStream ではないか、ロックされています。

Jake Archibald によるフェッチのキャンセルの例では、ストリームを使用して、チャンクごとに WHATWG HTML 仕様をフェッチします。 各チャンクで文字列 "service workers" を検索します。 検索用語が見つかると、cancel() を使用してストリームをキャンセルします — 仕事は終了しているため、ストリームは不要になります。

var searchTerm = "service workers";
// 一致した結果の両側を表示する文字数
var contextBefore = 30;
var contextAfter = 30;
var caseInsensitive = true;
var url = 'https://html.spec.whatwg.org/';

console.log(`'${searchTerm}' を '${url}' で検索`);

fetch(url).then(response => {
  console.log('ヘッダーを受信しました');

  var decoder = new TextDecoder();
  var reader = response.body.getReader();
  var toMatch = caseInsensitive ? searchTerm.toLowerCase() : searchTerm;
  var bufferSize = Math.max(toMatch.length - 1, contextBefore);
 
  var bytesReceived = 0;
  var buffer = '';
  var matchFoundAt = -1;

  return reader.read().then(function process(result) {
    if (result.done) {
      console.log('一致が見つかりませんでした');
      return;
    }

    bytesReceived += result.value.length;
    console.log(`これまでに ${bytesReceived} バイトのデータを受信しました`);

    buffer += decoder.decode(result.value, {stream: true});

    // 一致するものが既に見つかっており、コンテキストを収集していますか?
    if (matchFoundAt === -1) {
      matchFoundAt = (caseInsensitive ? buffer.toLowerCase() : buffer).indexOf(toMatch);
    }

    if (matchFoundAt === -1) {
      buffer = buffer.slice(-bufferSize);
    }
    else if (buffer.slice(matchFoundAt + toMatch.length).length >= contextAfter) {
      console.log("これが一致したものです:")
      console.log(buffer.slice(
        Math.max(0, matchFoundAt - contextBefore),
        matchFoundAt + toMatch.length + contextAfter
      ));
      console.log("フェッチのキャンセル");
      reader.cancel();
      return;
    }
    else {
      console.log('一致が見つかりましたが、さらにコンテキストが必要です…');
    }

    // 読み続けます
    return reader.read().then(process);
  });
}).catch(err => {
  console.log("何かがおかしかった。 詳細については、開発ツールを参照してください。 応答に CORS ヘッダーがありませんか?");
  throw err;
});

仕様

仕様 状態 コメント
Streams
cancel() の定義
現行の標準 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
cancel
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 30Safari 完全対応 10.1WebView Android 完全対応 43Chrome Android 完全対応 43Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 30Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。