Skip to main content

Streams API - 允许以编程方式访问通过网络接收的数据流，并对其进行处理

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

备注： 此特性在 Web Worker 中可用

概念和用法​

流式传输涉及将您希望通过网络接收的资源分解成小块，然后一点一点地处理它。 这是浏览器在接收要在网页上显示的资源时无论如何都会做的事情 - 视频缓冲，更多的视频逐渐可以播放，有时你会看到图片随着更多的加载而逐渐显示。

但是，这在以前是不可能出现在 JavaScript 中的。以前，如果我们想处理某种资源（无论是视频，还是文本文件，等等），我们必须下载整个文件，等待它被反序列化为合适的格式，然后在完全接收后处理整个文件。

随着流可用于 JavaScript，这一切都改变了 -- 一旦原始数据在客户端可用，您现在就可以开始使用 JavaScript 逐位处理原始数据，而不需要生成缓冲区、字符串或 Blob。

流的概念

它还有更多的优势 -- 您可以检测流的开始或结束时间，将流链接在一起，根据需要处理错误和取消流，并控制流的读取速度。

Streams 的基本用法是围绕着将响应作为流来使用。例如，一个成功的 fetch 请求返回的响应体可以转换为 ReadableStream，然后你可以用 ReadableStream.getReader() 创建的读取器来读取它，用 ReadableStream.cancel() 取消它，等等。

更复杂的用途包括使用 ReadableStream() 构造函数创建您自己的流，例如在服务工作线程 内处理数据。

您也可以使用 WritableStream 向流中写入数据。

注意： 您可以在我们的文章中找到更多关于 Streams 理论和实践的详细信息 - Streams API 概念，使用可读流，和使用可写流。

流接口​

可读流​

ReadableStream​

表示可读的数据流。支持处理 Fetch 接口的响应流或开发者自定义的流（如自定义的 ReadableStream() 构造函数）。

ReadableStreamDefaultReader​

表示可用于读取从网络提供的流数据 (例如，获取请求) 的默认读取器。

ReadableStreamDefaultController​

表示允许控制 ReadableStream 的状态和内部队列的控制器。默认控制器用于非字节流。

可写流​

WritableStream​

提供用于将流数据写入目标的标准抽象，称为接收器。这个对象带有内置的背压和排队功能。

WritableStreamDefaultWriter​

表示可用于将数据块写入可写流的默认可写流编写器。

WritableStreamDefaultController​

表示一个控制器，用于控制 WritableStream 的状态。在构造 WritableStream 时，底层接收器会被赋予一个对应的 WritableStreamDefaultController 实例进行操作。

转换流​

TransformStream​

表示一组可转换的数据。

TransformStreamDefaultController​

提供操作与转换流关联的 ReadableStream 和 WritableStream 的方法。

相关流 API 和操作​

ByteLengthQueuingStrategy​

提供可在构造流时使用的内置字节长度排队策略。

CountQueuingStrategy​

提供可在构造流时使用的内置区块计数排队策略。

对其他接口的扩展​

Request​

当构造一个新的 Request 对象时，可以在其 RequestInit 字典的 body 属性中传递一个 ReadableStream。然后可以将这个 Request 传递给 fetch() 以开始获取流。

Response.body​

成功的 fetch 请求返回的响应 Body 默认为 ReadableStream，可以附带读取器等。

与字节流相关的接口​

ReadableStreamBYOBReader​

表示可用于读取由开发人员提供的流数据的 BYOB（“自带缓冲区”）读取器 (例如，自定义的ReadableStream() 构造函数)。

ReadableByteStreamController​

表示允许控制 ReadableStream 的状态和内部队列的控制器。字节流控制器用于字节流。

ReadableStreamBYOBRequest​

表示 ReadableByteStreamController 中的拉入请求。

实例​

我们已经为 Streams API 文档创建了一个实例目录 -- 请参阅 mdn/dom-examples/streams。 以下是一些例子：

  • 简单的流泵：此实例说明如何使用 ReadableStream 并将其数据传递给另一个。
  • 灰度 PNG：此实例显示如何使用 ReadableStream 将 PNG转换为灰度。
  • 简单随机流：此实例说明如何使用自定义流生成随机字符串，将它们作为块排队，然后再次读出它们。
  • 简单的 T 形三通流实例：此实例扩展了简单随机流的例子，展示了如何将一个流串联起来，以及如何独立读取两个生成的流。
  • 简单的编写器：此实例说明如何写入可写流，然后对流进行解码并将内容写入 UI。
  • 解压缩 PNG 的块: 本例展示了如何使用 pipeThrough() 将 png 文件的数据转换为 png 块流，从而将 ReadableStream 转换为其他数据类型的流。

来自其他开发人员的实例：

规范​

规范
Streams Living Standard

浏览器兼容性​

ReadableStream​

桌面浏览器兼容性​

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持431465不支持3010.1
ReadableStream() 构造函数437965不支持3010.1
cancel431465不支持3010.1
getReader431465不支持3010.1
locked431465不支持3010.1
pipeThrough5979

102

101 — 102

不支持4610.1
pipeTo5979

100

99 — 100

不支持4610.1
tee437965不支持3010.1
transferable8787

103

102

不支持73不支持

移动浏览器兼容性​

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持4343未知65未知3010.3
ReadableStream() 构造函数4343未知65未知3010.3
cancel4343未知65未知3010.3
getReader4343未知65未知3010.3
locked4343未知65未知3010.3
pipeThrough5959未知102未知4310.3
pipeTo5959未知100未知4310.3
tee4343未知65未知3010.3
transferable8787未知103未知62不支持

1. Must be imported using either require('stream/web') or import * from 'stream/web'.

2. Experimental implementation.

WritableStream​

桌面浏览器兼容性​

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持5916

100

99 — 100

不支持4714.1
WritableStream() 构造函数5916

100

99 — 100

不支持4714.1
abort5916

100

99 — 100

不支持4714.1
close8181

100

99 — 100

不支持6814.1
getWriter5916

100

99 — 100

不支持4714.1
locked5916

100

99 — 100

不支持4714.1
transferable8787

103

102

不支持73不支持

移动浏览器兼容性​

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持5959未知100未知4414.5
WritableStream() 构造函数5959未知100未知4414.5
abort5959未知100未知4414.5
close8181未知100未知5814.5
getWriter5959未知100未知4414.5
locked5959未知100未知4414.5
transferable8787未知103未知62不支持

1. Must be imported using either require('stream/web') or import * from 'stream/web'.

2. Experimental implementation.

相关链接​