流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)是轉換器物件包含的方法。其中controller是TransformStreamDefaultController的例項。
writableStrategy - 此物件用於定義寫流的排隊策略。它採用兩個引數：highWaterMark和size(chunk)。
readableStrategy - 此物件用於定義讀流的排隊策略。它採用兩個引數：highWaterMark和size(chunk)。

例項屬性

TransformStream介面提供的屬性是隻讀屬性。因此，TransformStream提供的屬性為：

序號	屬性和描述
1	TransformStream.readable 此屬性返回TransformStream的可讀端。
2	TransformStream.writable 此屬性返回TransformStream的可寫端。

序號

屬性和描述

TransformStream.readable

此屬性返回TransformStream的可讀端。

TransformStream.writable

此屬性返回TransformStream的可寫端。

TransformStreamDefaultController 介面

TransformStreamDefaultController介面提供各種方法來操作ReadableStream和WritableStream。當我們建立TransformStream時，TransformStreamDefaultController會自動建立，因此不需要任何單獨的建構函式。

例項屬性

TransformStreamDefaultController介面提供的屬性是隻讀屬性。因此，TransformStreamDefaultController提供的屬性為：

序號	屬性和描述
1	TransformStreamDefaultController.desiredSize 此屬性返回一個大小，該大小將填充流的內部佇列的可讀端。

方法

以下是TransformStreamDefaultController介面常用的方法：

序號	方法和描述
1	TransformStreamDefaultController.enqueue() 此方法用於在給定流的可讀端入隊一段資料。
2	TransformStreamDefaultController.error() 此方法用於查詢流的可讀端和可寫端的錯誤。
3	TransformStreamDefaultController.terminate() 此方法用於關閉變換流的可讀端和可寫端的錯誤。

序號

方法和描述

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中的物件模式。

列印頁面