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

句法

var readableStream = new ReadableStream(underlyingSource[, queuingStrategy]);
					

参数

underlyingSource
An object containing methods and properties that define how the constructed stream instance will behave. underlyingSource can contain the following:
start(controller)
This is a method, called immediately when the object is constructed. The contents of this method are defined by the developer, and should aim to get access to the stream source, and do anything else required to set up the stream fuctionality. If this process is to be done asynchronously, it can return a promise to signal success or failure. The controller parameter passed to this method is a ReadableStreamDefaultController ReadableByteStreamController , depending on the value of the type property. This can be used by the developer to control the stream during set up.
pull(controller) 可选
This method, also defined by the developer, will be called repeatedly when the stream's internal queue of chunks is not full, up until it reaches its high water mark. If pull() returns a promise, then it won't be called again until that promise fulfills; if the promise rejects, the stream will become errored. The controller parameter passed to this method is a ReadableStreamDefaultController ReadableByteStreamController , depending on the value of the type property. This can be used by the developer to control the stream as more chunks are fetched.
cancel(reason) 可选
This method, also defined by the developer, will be called if the app signals that the stream is to be cancelled (e.g. if ReadableStream.cancel() is called). The contents should do whatever is necessary to release access to the stream source. If this process is asynchronous, it can return a promise to signal success or failure. The reason parameter contains a DOMString describing why the stream was cancelled.
type 可选
This property controls what type of readable stream is being dealt with. If it is included with a value set to "bytes" , the passed controller object will be a ReadableByteStreamController capable of handling a BYOB (bring your own buffer)/byte stream. If it is not included, the passed controller will be a ReadableStreamDefaultController .
autoAllocateChunkSize 可选
For byte streams, the developer can set the autoAllocateChunkSize with a positive integer value to turn on the stream's auto-allocation feature. With this turned on, the stream implementation will automatically allocate an ArrayBuffer with a size of the given integer, and the consumer can also use a default reader.
queuingStrategy 可选
An object that optionally defines a queuing strategy for the stream. This takes two parameters:
highWaterMark

A non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied.

size(chunk)
A method containing a parameter chunk — this indicates the size to use for each chunk, in bytes.

注意 : You could define your own custom queuingStrategy , or use an instance of ByteLengthQueuingStrategy or CountQueuingStrategy for this object value. If no queuingStrategy is supplied, the default used is the same as a CountQueuingStrategy with a high water mark of 1.

返回值

An instance of the ReadableStream 对象。

异常

RangeError
The supplied type value is neither "bytes" nor undefined .

范例

In the following simple example, a custom ReadableStream is created using a constructor (see our Simple random stream example for the full code). The start() function generates a random string of text every second and enqueues it into the stream. A cancel() fuction is also provided to stop the generation if ReadableStream.cancel() is called for any reason.

When a button is pressed, the generation is stopped, the stream is closed using ReadableStreamDefaultController.close() , and another function is run, which reads the data back out of the stream.

const stream = new ReadableStream({
  start(controller) {
    interval = setInterval(() => {
      let string = randomChars();
      // Add the string to the stream
      controller.enqueue(string);
      // show it on the screen
      let listItem = document.createElement('li');
      listItem.textContent = string;
      list1.appendChild(listItem);
    }, 1000);
    button.addEventListener('click', function() {
      clearInterval(interval);
      fetchStream();
      controller.close();
    })
  },
  pull(controller) {
    // We don't really need a pull in this example
  },
  cancel() {
    // This is called if the reader cancels,
    // so we should stop generating strings
    clearInterval(interval);
  }
});
										

规范

规范 状态 注释

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

浏览器兼容性

The compatibility table on 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
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 ) 和 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

图例

完整支持

完整支持

不支持

不支持

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

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

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

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

元数据

  • 最后修改:
  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

版权所有  © 2014-2026 乐数软件    

工业和信息化部: 粤ICP备14079481号-1