在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

tee() 方法在 ReadableStream interface tees the current readable stream, returning a two-element array containing the two resulting branches as new ReadableStream 实例。

This is useful for allowing two readers to read a stream simultaneously, perhaps at different speeds. You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, you’d need two copies to do this.

To cancel the stream you then need to cancel both resulting branches. Teeing a stream will generally lock it for the duration, preventing other readers from locking it.

句法

var teedStreams = readableStream.tee();
					

参数

None.

返回值

数组 containing two ReadableStream 实例。

异常

TypeError

The source stream is not a ReadableStream .

范例

In the following simple example, a previously-created stream is teed, then both resulting streams (contained in two members of a generated array) are passed to a function that reads the data out of the two streams and prints each stream's chunks sequentially to a different part of the UI. See Simple tee example for the full code.

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);
  });
}
					

规范

规范	状态	注释
流 The definition of 'tee()' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
tee	Chrome 43	Edge 79	Firefox 65 65 57 Disabled Disabled From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE No	Opera 30	Safari 10.1	WebView Android 43	Chrome Android 43	Firefox Android 65 65 57 Disabled Disabled From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 30	Safari iOS 10.3	Samsung Internet Android 4.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： Jan 3, 2020

相关话题

1. Streams API
2. ReadableStream
3. 构造函数

   1. ReadableStream()
4. 特性

   1. locked
5. 方法

   1. cancel()
   2. getReader()
   3. pipeThrough()
   4. pipeTo()
   5. tee()
6. Related pages for Streams

   1. Body.body
   2. ByteLengthQueuingStrategy
   3. CountQueuingStrategy
   4. ReadableByteStreamController
   5. ReadableStreamBYOBReader
   6. ReadableStreamBYOBRequest
   7. ReadableStreamDefaultController
   8. ReadableStreamDefaultReader
   9. WindowOrWorkerGlobalScope.fetch()
   10. WritableStream
   11. WritableStreamDefaultController
   12. WritableStreamDefaultWriter