这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Streams API允许JavaScript以编程的方式访问通过网络接收的数据流,并根据开发人员的需要处理它们。

概念和用法

流将你希望通过网络接收的资源拆分成小块,然后按位处理它。这正是浏览器在接收用于显示web页面的资源时做的事情——视频缓冲区和更多的内容可以逐渐播放,有时候随着内容的加载,你可以看到图像逐渐地显示。

但曾经这些对于JavaScript是不可用的。以前,如果我们想要处理某种资源(如视频、文本文件等),我们必须下载完整的文件,等待它反序列化成适当的格式,然后在完整地接收到所有的内容后再进行处理。

随着流在JavaScript中的使用,一切发生了改变——只要流在客户端可用,你就可以使用JavaScript 位处理原始数据,不再需要缓冲区、字符串或blob。

还有更多的优点——您可以检测流何时开始或结束,将流链接在一起,根据需要处理错误和取消流,并对流的读取速度做出反应。

The basic usage of Streams hinges around making responses available as streams. For example, the response Body returned by a successful fetch request can be exposed as a ReadableStream, and you can then read it using a reader created with ReadableStream.getReader(), cancel it with ReadableStream.cancel(), etc.

More complicated uses involve creating your own stream using the ReadableStream() constructor, for example to process data inside a service worker.

You can also write data to streams using WritableStream.

Note: You can find a lot more details about the theory and practice of streams in our articles — Streams API concepts, Using readable streams, and Using writable streams.

Stream interfaces

Readable streams

ReadableStream
Represents a readable stream of data. It can be used to handle response streams of the Fetch API, or developer-defined streams (e.g. a custom ReadableStream() constructor).
ReadableStreamDefaultReader
Represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request).
ReadableStreamDefaultController
Represents a controller allowing control of a ReadableStream's state and internal queue. Default controllers are for streams that are not byte streams.

Writable streams

WritableStream
Provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.
WritableStreamDefaultWriter
Represents a default writable stream writer that can be used to write chunks of data to a writable stream.
WritableStreamDefaultController
Represents a controller allowing control of a WritableStream's state. When constructing a WritableStream, the underlying sink is given a corresponding WritableStreamDefaultController instance to manipulate.
ByteLengthQueuingStrategy
Provides a built-in byte length queuing strategy that can be used when constructing streams.
CountQueuingStrategy
Provides a built-in chunk counting queuing strategy that can be used when constructing streams.

Extensions to other APIs

Request
When a new Request object is constructed, you can pass it a ReadableStream in the body property of its RequestInit dictionary.  This Request could then be passed to a WindowOrWorkerGlobalScope.fetch() to commence fetching the stream.
Body
The response Body returned by a successful fetch request is exposed by default as a ReadableStream, and can have a reader attached to it, etc.

Important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

ReadableStreamBYOBReader
Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom ReadableStream() constructor).
ReadableByteStreamController
Represents a controller allowing control of a ReadableStream's state and internal queue. Byte stream controllers are for byte streams.
ReadableStreamBYOBRequest
Represents a pull into request in a ReadableByteStreamController.

Examples

We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:

  • Simple stream pump: This example shows how to consume a ReadableStream and pass its data to another.
  • Grayscale a PNG: This example shows how a ReadableStream of a PNG can be turned into grayscale.
  • Simple random stream: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
  • Simple tee example: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
  • Simple writer: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
  • Unpack chunks of a PNG: This example shows how pipeThrough() can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.

Examples from other developers:

Specifications

Specification Status Comment
Streams Living Standard Initial definition.

Browser compatibility

ReadableStream

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ReadableStream
Experimental
Chrome Full support 43Edge Full support 14Firefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0
ReadableStream() constructor
Experimental
Chrome Full support 43Edge No support NoFirefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0
locked
Experimental
Chrome Full support 43Edge Full support 14Firefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0
cancel
Experimental
Chrome Full support 43Edge Full support 14Firefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0
getReader
Experimental
Chrome Full support 43Edge Full support 14Firefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0
pipeThrough
Experimental
Chrome Full support 59Edge No support NoFirefox No support NoIE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
pipeTo
Experimental
Chrome Full support 59Edge No support NoFirefox No support NoIE No support NoOpera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0
tee
Experimental
Chrome Full support 43Edge No support NoFirefox Full support 65
Full support 65
Full support 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 support NoOpera Full support 30Safari ? WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 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 Full support 30Safari iOS ? Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

WritableStream

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WritableStream
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0
WritableStream() constructor
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0
abort
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0
getWriter
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0
locked
Experimental
Chrome Full support 59Edge Full support 16Firefox No support NoIE No support NoOpera Full support 47Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android No support NoOpera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

文档标签和贡献者

此页面的贡献者: jiangseventeen
最后编辑者: jiangseventeen,