Web/API/ReadableStream/cancel

The cancel() method of the ReadableStream interface cancels the associated stream. The supplied reason parameter will be given to the underlying source, which may or may not use it.

Cancel is used when you've completely finished with the stream and don't need any more data from it, even if there are chunks enqueued waiting to be read. That data is lost after cancel is called, and the stream is not readable any more. To read those chunks still and not completely get rid of the stream, you'd use ReadableStreamDefaultController.close().

Syntax

var promise = readableStream.cancel(reason);

Parameters

reason: A DOMString providing a human-readable reason for the cancellation.

Return value

A Promise, which fulfills with the value given in the reason parameter.

Exceptions

TypeError: The stream you are trying to cancel is not a ReadableStream, or it is locked.

Examples

In Jake Archibald's cancelling a fetch example, a stream is used to fetch the WHATWG HTML spec chunk by chunk; each chunk is searched for the string "service workers". When the search terms is found, cancel() is used to cancel the stream — the job is finished so it is no longer needed.

var searchTerm = "service workers";
// Chars to show either side of the result in the match
var contextBefore = 30;
var contextAfter = 30;
var caseInsensitive = true;
var url = 'https://html.spec.whatwg.org/';

console.log(`Searching '${url}' for '${searchTerm}'`);

fetch(url).then(response => {
  console.log('Received headers');

  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('Failed to find match');
      return;
    }

    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

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

    // already found match & just context-gathering?
    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("Here's the match:")
      console.log(buffer.slice(
        Math.max(0, matchFoundAt - contextBefore),
        matchFoundAt + toMatch.length + contextAfter
      ));
      console.log("Cancelling fetch");
      reader.cancel();
      return;
    }
    else {
      console.log('Found match, but need more context…');
    }

    // keep reading
    return reader.read().then(process);
  });
}).catch(err => {
  console.log("Something went wrong. See devtools for details. Does the response lack CORS headers?");
  throw err;
});

Specifications

Specification	Status	Comment
StreamsThe definition of 'cancel()' in that specification.	Living Standard	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`cancel` Experimental'	Chrome Full support 43	Edge Full support 14	Firefox Full support 65 Full support 65 Full support 57 Disabled' Disabled' 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 No support No	Opera Full support 30	Safari Full support 10.1	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 65 Full support 65 Full support 57 Disabled' Disabled' 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 Full support 30	Safari iOS Full support 10.3	Samsung Internet Android Full support 4.0

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.': User must explicitly enable this feature.

ReadableStream.cancel() by Mozilla Contributors is licensed under CC-BY-SA 2.5.