Ajax 简明教程
Stream API - Transform Streams
在 Stream API 中，转换流用于实现管线概念。管线是一个过程，其中多个流相互连接。原始源是管线的起始点，而最终汇是管线的结束点。
TransformStream Interface
流 API 支持两种类型的转换流接口 -
-
TransformStream Interface
-
TransformStreamDefaultController
Constructor
为了创建一个转换流对象，TransformStream 接口提供了一个 TransformStream() 构造函数。此对象表示流对，即用于可写面的 WritableStream 和用于可读面的 ReadableStream。
Syntax
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) 是转换器对象包含的方法。其中控制器是 TransformStreamDefaultController 的实例。
-
writableStrategy - 此对象用于定义写入流的排队策略。它采用两个参数：highWaterMark 和 size(chunk)。
-
readableStrategy - 此对象用于定义读取流的排队策略。它采用两个参数：highWaterMark 和 size(chunk)。
Instance Properties
TransformStream 接口提供的属性是只读属性。因此，TransformStream 提供的属性 -
Sr.No. |
Property & Description |
1 |
TransformStream.readable 此属性返回 TransformStream 的可读端。 |
2 |
TransformStream.writable 此属性返回 TransformStream 的可写端。 |
TransformStreamDefaultController Interface
TransformStreamDefaultController 接口提供了各种方法来处理 ReadableStream 和 WritableStream。当我们创建一个 TransformStream 时，将自动创建 TransformStreamDefaultController。因此，不需要任何单独的构造函数。
Instance Properties
TransformStreamDefaultController 接口提供的属性是只读属性。因此，TransformStreamDefaultController 提供的属性 -
Sr.No. |
Property & Description |
1 |
TransformStreamDefaultController.desiredSize 此属性返回一个大小，该大小将填充流内部队列的可读部分。 |
Methods
以下为 TransformStreamDefaultController 接口常用的方法−
Sr.No. |
Method & Description |
1 |
TransformStreamDefaultController.enqueue() 此方法用于在给定流的可读部分上排队放置一块数据。 |
2 |
TransformStreamDefaultController.error() 此方法用于在流的可读部分和可写部分上查找错误。 |
3 |
TransformStreamDefaultController.terminate() 此方法用于关闭可读部分和转换流的可写部分的错误。 |
Example - Creating Transform Stream
在以下程序中，我们创建一个自定义转换流。因此，要创建一个转换流，我们使用 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>