可读流：cancel() 方法

注意： 此功能在 Web Workers 中可用。

cancel() 是 ReadableStream 接口的方法，它返回一个 Promise，该 Promise 在流取消时解析。

当您完全使用完流并且不再需要来自流的任何更多数据时，即使有排队的块等待读取，也会使用取消。在调用取消后，这些数据将丢失，并且流将不再可读。要读取这些块而不完全摆脱流，可以使用 ReadableStreamDefaultController.close()。

语法

js
cancel()
cancel(reason)

参数

reason 可选

取消的原因，可供人类理解。此原因将传递给底层源，底层源可能会使用它，也可能不会使用它。

返回值

一个 Promise，它将以 undefined 值完成。

异常

TypeError

您尝试取消的流不是 ReadableStream，或者它被锁定。

示例

在 Jake Archibald 的 取消获取 示例中，使用流来逐块获取 WHATWG HTML 规范；每个块都搜索字符串“服务工作者”。当找到搜索词时，cancel() 用于取消流 - 工作已完成，因此不再需要。

js
const searchTerm = "service workers";
// Chars to show either side of the result in the match
const contextBefore = 30;
const contextAfter = 30;
const caseInsensitive = true;
const url = "https://html.whatwg.com.cn/";

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

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

    const decoder = new TextDecoder();
    const reader = response.body.getReader();
    const toMatch = caseInsensitive ? searchTerm.toLowerCase() : searchTerm;
    const bufferSize = Math.max(toMatch.length - 1, contextBefore);

    let bytesReceived = 0;
    let buffer = "";
    let 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.error(
      "Something went wrong. See devtools for details. Does the response lack CORS headers?",
    );
    throw err;
  });

规范

规范
流标准
# ref-for-rs-cancel③

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅