- AJAX 教程
- AJAX - 教程
- AJAX - 什么是 AJAX?
- Ajax - 历史
- Ajax - 动态站点与静态站点
- AJAX - 技术
- AJAX - action(操作)
- AJAX - XMLHttpRequest
- AJAX - 发送请求
- AJAX - 请求类型
- AJAX - 处理响应
- AJAX - 处理二进制数据
- AJAX - 提交表单
- AJAX - 文件上传
- AJAX - FormData 对象
- AJAX - 发送 POST 请求
- AJAX - 发送 PUT 请求
- AJAX - 发送 JSON 数据
- AJAX - 发送数据对象
- AJAX - 监控进度
- AJAX - 状态代码
- AJAX - 应用程序
- AJAX - 浏览器兼容性
- AJAX - 浏览器支持
- AJAX - 数据库操作
- AJAX - 安全性
- AJAX - 常见问题
- Fetch API 基础知识
- Fetch API - 基础知识
- Fetch API 与 XMLHttpRequest
- Fetch API - 浏览器兼容性
- Fetch API - headers
- Fetch API - 请求
- Fetch API - 响应
- Fetch API - 正文数据
- Fetch API - 凭证
- Fetch API - 发送 GET 请求
- Fetch API - 发送 POST 请求
- Fetch API - 发送 PUT 请求
- Fetch API - 发送 JSON 数据
- Fetch API - 发送数据对象
- Fetch API - 自定义请求对象
- Fetch API - 上传文件
- Fetch API - 处理二进制数据
- Fetch API - 状态代码
- Stream API 基础知识
- Stream API - 基础
- Stream API - 可读流
- Stream API - 可写流
- Stream API - 转换流
- stream API - 请求对象
- stream API - 响应正文
- Stream API - 错误处理
Stream API - 转换流
在 Stream API 中,转换流用于实现管道链概念。管道链是多个流相互连接的过程。原始源称为管道链的起点,而最终凹陷称为管道链的终点。
TransformStream 接口
Stream API 支持两种类型的转换流接口 -
- TransformStream 接口
- TransformStreamDefaultController
TransformStream 接口
TransformStream 接口用于实现管道链变换流方法。
构造 函数
要创建转换流对象,TransformStream 接口提供了一个 TransformStream() 构造函数。此对象表示一对流,它们是可写端的 WritableStream 和可读端的 ReadableStream。
语法
const newTrans = new TransformStream()
Or
const newTrans = new TransformStream(mtransform)
Or
const newTrans = new TransformStream(mtransform, writableStrategy)
Or
const newTrans = new TransformStream(mtransform, writableStrategy, readableStrategy)
以下是 TransformStream() 构造函数的可选参数 -
- mtransform − 此对象表示变压器。start(controller)、transform(chunk, controller) 和 flush(controller) 是 transformer 对象包含的方法。其中 controller 是 TransformStreamDefaultController 的实例。
- writableStrategy − 此对象用于定义写入流的排队策略。它需要两个参数:highWaterMark 和 size(chunk)。
- readableStrategy – 此对象用于定义读取流的排队策略。它需要两个参数:highWaterMark 和 size(chunk)。
实例属性
TransformStream 接口提供的属性是只读属性。所以 TransformStream 提供的属性是 -
属性 | 描述 |
---|---|
TransformStream.readable |
此属性返回 TransformStream 的可读端。 |
TransformStream.writable |
此属性返回 TransformStream 的可写端。 |
TransformStreamDefaultController 接口
TransformStreamDefaultController 接口提供了多种方法来操作 ReadableStream 和 WritableStream。当我们创建一个 TransformStream 时,会自动创建 TransformStreamDefaultController。因此,它不需要任何单独的构造函数。
实例属性
TransformStreamDefaultController 接口提供的属性是只读属性。因此,TransformStreamDefaultController 提供的属性为 −
属性 | 描述 |
---|---|
TransformStreamDefaultController.desiredSize |
此属性返回一个大小,该大小将填充流内部队列的可读端。 |
方法
以下是 TransformStreamDefaultController 接口的常用方法 -
方法 | 描述 |
---|---|
TransformStreamDefaultController.enqueue() |
此方法用于将一段数据排入给定流的可读端。 |
TransformStreamDefaultController.error() |
此方法用于查找流的可读端和可写端的错误。 |
TransformStreamDefaultController.terminate() |
该方法用于关闭转换流的可读端和可写端的错误。 |
示例 - 创建转换流
在下面的程序中,我们创建了一个自定义转换流。因此,要创建转换流,我们将 TransformStream() 构造函数与 transform()、flush()、start() 和 cancel() 函数一起使用。transform() 函数实现接收到的块,然后以大写形式转换它们,然后使用 enqueue() 方法将数据排入队列。flush() 方法用于处理流终结,start() 方法用于处理初始化,cancel() 方法用于处理取消。现在,我们使用 getWriter() 方法从转换流中获取写入器,以读取流的数据。然后我们使用 getReader() 函数获取转换流的读取器。它在 myread() 函数的帮助下从流中读取和处理转换后的数据。
<!DOCTYPE html>
<html>
<body>
<script>
// Create a transform stream using TransformStream() constructor
const newTransform = new TransformStream({
transform(chunk, controller) {
// Processing the received chunk in uppercase
const tData = chunk.toString().toUpperCase();
// Enqueue the transformed data and passed it to the downstream
controller.enqueue(tData);
},
// Handling the finalized data, if required
flush(controller) {
console.log('Stream is flushing');
},
// Performing the initialization, if required
start(controller) {
console.log('Stream is started');
},
// Handling the stream if it is cancelled
cancel(reason) {
console.log('Stream got canceled:', reason);
}
});
// Creating a writer for the transform stream
const twriter = newTransform.writable.getWriter();
// Writing the data into the transform stream
twriter.write('pink');
twriter.write('green');
twriter.write('blue');
// Closing the stream
twriter.close();
// Creating a reader for the transform stream
const treader = newTransform.readable.getReader();
// Read and process data from the transform stream
function myread(){
treader.read().then(({ done, value }) => {
if (done) {
console.log('Stream is ended');
return;
}
// Processing the received transformed data
console.log(value);
// Continue reading data from the stream
myread();
});
}
// Calling the myread() to start reading from the transform stream
myread();
</script>
</body>
</html>
结论
这就是转换流的工作原理。它通常用于我们将多个流连接在一起。现在,在下一篇文章中,我们将学习 Stream API 中的对象模式。