前端开发过程中，我们经常会用到流的概念，比如通过流进行大文件上传、数据流式传输等。而 web-streams-polyfill 就是一款能够在不同浏览器环境下为我们提供流相关 API的 npm 包。
什么是 web-streams-polyfill
web-streams-polyfill 是一个轻量级的 JavaScript 库，可以在各种浏览器环境下为我们输出流的支持。它基于流API标准，实现了 ReadableStream、WritableStream、TransformStream三个流 API，并且通过提供 globalThis、queueMicrotask 等浏览器环境内部使用的方法，完全模拟了浏览器对流API的支持。
web-streams-polyfill目前还处于 beta 版本，已经可以用于生产环境，并且得到了各大浏览器厂商的支持，其中包含 Chrome, Firefox, Safari, MS Edge 以及 Nodejs。借助 web-streams-polyfill 的支持，我们不再需要为不同浏览器环境下流的支持而烦恼，只需引入 web-streams-polyfill 并按照其 API 使用即可。
使用 web-streams-polyfill
首先，我们需要在自己的项目中安装 web-streams-polyfill。有两种安装方式：
使用 npm 安装：$ npm install web-streams-polyfill
推荐使用 npm 安装方式，因为它支持自动管理依赖关系，方便后续维护和更新。
手动下载
在 GitHub 的页面上找到下载链接（https://github.com/keithamus/web-streams-polyfill/releases），下载打包好的 web-streams-polyfill.js 文件并将其复制到项目目录下。
接下来在你脚本需要的地方，引入 web-streams-polyfill 即可：
------ ------------------ ---- -----------------------
web-streams-polyfill 主要 API
web-streams-polyfill 主要提供三个 API：ReadableStream、WritableStream、TransformStream，分别负责创建可读流、可写流与可读写数据流，并为流相关操作提供方法，具体介绍参考下文。
ReadableStream
创建一个可读的流：
----- -- - --- ----------------
----------------- -
-- ------
----------------------------
----------------------------
-- ---
-------------------
-
---ReadableStream 对象本身不会包含任何数据，我们需要可以通过构造函数的参数 start 控制器对象读取流中的数据并推入数据。
对于上面的例子，控制器对象的 enqueue 方法用于将数据推入流中，close 方法则用于关闭流。
WritableStream
创建一个可写的流：
----- -- - --- ----------------
------------ -
-------------------- -------- -------
--
------- -
-------------------- ---------
--
-------- -
--------------------- -------- ---
-
---WritableStream 对象会消费由 ReadableStream 对象推入流中的数据，write() 方法接受一个流管道中的数据块并消化它。当 ReadableStream 关闭时，将调用 close() 方法。如果发生错误，则调用 abort() 方法。
TransformStream
创建一个 TransformStream 对象，既可读也可写。
----- -- - --- -----------------
---------------- ----------- -
----------------------------------------
-
---TransformStream 允许您将可读流中的数据转换为新数据并将其推回管道中。
示例代码
还是让我们通过一个简单的代码示例来看看 web-stream-polyfill 和浏览器的 Stream API 之间的不同之处吧：
-- ---- ----------- ------ -------- -------- ------
----- ------ - --- -----------------
---------------- ----------- -
----------------------------------------
-
---
----- ------ - ----------------------------
-- -------
----------------------
----------------------
---------------
-- --------------- ----------- ------ -------- -------------- ---
----- ------ - ----------------------------
------ -- -- -
----- ------ -
----- - ------ ---- - - ----- --------------
-- ------ -
------------------- -- -------
------
-
-------------------
-
-----在这个示例中，我们将坐着输入流，由 TransformStream 对象将管道里的数据转换为大写文字，并再次输送到写入流中。随后，我们将流读入新的 ReadableStream 对象，并将其推送到控制台输出。
总结
web-streams-polyfill 是一个能够在不同浏览器环境下为我们提供流相关 API的 npm 包。在更高效、可维护性等方面都有很大的优势。本教程希望能够帮助开发者理解 web-streams-polyfill 的 API，并在实际项目中应用它为我们带来的便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/70503