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

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

概念和用法

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

但是，这在以前是不可能出现在 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 转换为其他数据类型的流。

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

• 具有流、服务工作线程和 Fetch 的进度指示器。

规范

规范
Streams Living Standard

浏览器兼容性

ReadableStream

桌面浏览器兼容性

移动浏览器兼容性

WritableStream

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Streams API 概念
• 使用可读的流
• 使用可写的流