This page is not complete.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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().


Promise<reason> readableStreamInstance.cancel(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.


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


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 = '';

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 process(result) {
    if (result.done) {
      console.log('Failed to find match');

    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:")
        Math.max(0, matchFoundAt - contextBefore),
        matchFoundAt + toMatch.length + contextAfter
      console.log("Cancelling fetch");
    else {
      console.log('Found match, but need more context…');

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


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support4316571 No30 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support43431657130 ?4.0

1. 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.

Document Tags and Contributors

Contributors to this page: fscholz, chrisdavidmills
Last updated by: fscholz,