ReadableStream

ReadableStream interface of the Streams API represents a readable stream of byte data. The 抓取 API offers a concrete instance of a ReadableStream through the body property of a Response 对象。

构造函数

ReadableStream()
Creates and returns a readable stream object from the given handlers.

特性

ReadableStream.locked 只读
locked getter returns whether or not the readable stream is locked to a reader .

方法

ReadableStream.cancel()
Cancels the stream, signaling a loss of interest in the stream by a consumer. The supplied reason argument will be given to the underlying source, which may or may not use it.
ReadableStream.getIterator()
Creates a ReadableStream async iterator instance and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
ReadableStream.getReader()
Creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
ReadableStream.pipeThrough()
Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.
ReadableStream.pipeTo()
Pipes the current ReadableStream to a given WritableStream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered.
ReadableStream.tee()
tee method tees this readable stream, returning a two-element array containing the two resulting branches as new ReadableStream instances. Each of those streams receives the same incoming data.
ReadableStream[@@asyncIterator]()
Alias of getIterator 方法。

范例

In the following example, an artificial Response is created to stream HTML fragments fetched from another resource to the browser.

It demonstrates the usage of a ReadableStream in combination with a Uint8Array .

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // The following function handles each data chunk
      function push() {
        // "done" is a Boolean and value a "Uint8Array"
        reader.read().then(({ done, value }) => {
          // Is there no more data to read?
          if (done) {
            // Tell the browser that we have finished sending data
            controller.close();
            return;
          }
          // Get the data and send it to the browser via the controller
          controller.enqueue(value);
          push();
        });
      };
      push();
    }
  });
  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});
					

规范

规范 状态 Comment

The definition of 'ReadableStream' in that specification.
实时标准 初始定义

浏览器兼容性

更新 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
ReadableStream
Chrome 43 Edge 14 Firefox 65
65
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 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0
ReadableStream() 构造函数
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 ) and the javascript.options.streams preference (needs to be set to true ). 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0
cancel
Chrome 43 Edge 14 Firefox 65
65
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 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0
getReader
Chrome 43 Edge 14 Firefox 65
65
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 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0
locked
Chrome 43 Edge 14 Firefox 65
65
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 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0
pipeThrough
Chrome 59 Edge 79 Firefox 不支持 No IE 不支持 No Opera 46 Safari 10.1 WebView Android 59 Chrome Android 59 Firefox Android 不支持 No Opera Android 43 Safari iOS 10.3 Samsung Internet Android 7.0
pipeTo
Chrome 59 Edge 79 Firefox 不支持 No IE 不支持 No Opera 46 Safari 10.1 WebView Android 59 Chrome Android 59 Firefox Android 不支持 No Opera Android 43 Safari iOS 10.3 Samsung Internet Android 7.0
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 ) and the javascript.options.streams preference (needs to be set to true ). 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 ) and the javascript.options.streams preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 30 Safari iOS 10.3 Samsung Internet Android 4.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅