可读流：tee() 方法

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

tee() 方法是 ReadableStream 接口的 分流 方法，它会分流当前的可读流，并返回一个包含两个新 ReadableStream 实例作为分支的双元素数组。

这对于允许两个读取器顺序或同时读取流很有用，也许速度不同。例如，如果您想在 ServiceWorker 中从服务器获取响应并将其流式传输到浏览器，同时也将它流式传输到 ServiceWorker 缓存，则可能需要这样做。由于响应主体不能被使用多次，因此您需要两个副本才能执行此操作。

分流的流将以两个 ReadableStream 分支中较快的消费者的速度部分地发出背压信号，而未读数据会以无限制或背压的方式在内部存储在较慢消费的 ReadableStream 中。也就是说，当两个分支在它们的内部队列中都有一个未读元素时，原始 ReadableStream 的控制器的内部队列将开始填充，一旦它的 desiredSize ≤ 0 或字节流控制器 desiredSize ≤ 0，控制器将停止在传递给 ReadableStream() 的底层源上调用 pull(controller)。如果只有一个分支被消费，那么整个主体将被存储在内存中。因此，您不应使用内置的 tee() 以不同速度并行读取非常大的流。相反，请搜索一个完全背压到较慢消费分支速度的实现。

要取消流，您需要取消两个生成的流分支。分流流通常会锁定它，防止其他读取器锁定它。

语法

js
tee()

参数

无。

返回值

包含两个 ReadableStream 实例的 Array。

异常

TypeError

如果源流不是 ReadableStream，则会抛出该异常。

示例

在以下简单的示例中，先前创建的流被分流，然后将两个生成的流（包含在生成的数组的两个成员中）传递给一个函数，该函数从两个流中读取数据，并将每个流的块按顺序打印到 UI 的不同部分。有关完整代码，请参阅 简单分流示例。

js
function teeStream() {
  const teedOff = stream.tee();
  fetchStream(teedOff[0], list2);
  fetchStream(teedOff[1], list3);
}

function fetchStream(stream, list) {
  const reader = stream.getReader();
  let charsReceived = 0;

  // read() returns a promise that resolves
  // when a value has been received
  reader.read().then(function processText({ done, value }) {
    // Result objects contain two properties:
    // done  - true if the stream has already given you all its data.
    // value - some data. Always undefined when done is true.
    if (done) {
      console.log("Stream complete");
      return;
    }

    // value for fetch streams is a Uint8Array
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent = `Read ${charsReceived} characters so far. Current chunk = ${chunk}`;
    list.appendChild(listItem);

    // Read some more, and call this function again
    return reader.read().then(processText);
  });
}

规范

规范
流标准
# ref-for-rs-tee②

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅