流 API - 請求物件

請求物件用於從伺服器獲取資源。請求物件是使用 Request 介面提供的 Resquest() 建構函式建立的。因此，當建立新的 Request 物件時，我們可以將 ReadableStream 傳遞給 Request 物件的主體，此類請求稱為流式請求。然後將此請求物件傳遞給 fetch() 函式以獲取資源。

語法

const myobject = new Request(URL, {
   method: 'POST',
   body: Stream,
   headers: {'Content-Type'},
   duplex: 'half',
});

這裡 Request() 建構函式包含以下引數：

URL - 資源的地址。
method - 它表示 HTTP 請求方法，例如 GET、POST 等。
body - 包含 ReadableStream 物件。
headers - 包含主體適用的頭部資訊。
duplex - 設定為 half 以建立雙工流。

示例

在下面的程式中，我們建立一個流式請求。為此，我們首先使用 ReadableStream() 建構函式以及實現 ReadableStream 邏輯和其他操作的 start() 函式建立一個可讀流。然後，我們使用 Request() 建構函式以及以下選項建立一個請求物件：method 選項包含傳送請求的 POST 請求，body 選項包含流，headers 選項包含相應的頭部資訊，duplex 選項設定為 half 以使其成為雙工流。建立請求物件後，我們現在將該物件傳遞給 fetch() 函式以發出請求，此函式使用 then() 處理響應，並使用 catch() 函式處理錯誤（如果發生）。在這裡，您可以使用有效的 API/URL 替換 https://exampleApi.com/，該 API/URL 以塊的形式傳送/接收資料。

<script>
   // Create a readable stream using the ReadableStream constructor()  
   const readStream = new ReadableStream({
      start(controller) {
         // Here implement your ReadableStream 
         // Also with the help of controller, you can enqueue data and 
         // signal the end of the stream
      },
   });
   
   // Create a request objecct using Request() constructor
   const request = new Request('https://exampleApi.com/', {
      // Set the method
      method: 'POST',
   
      // Passing the stream to the body of the request
      body: stream,
   
      // Setting suitable header
      headers: {'Content-Type': 'application/octet-stream'},
      duplex: 'half' 
   });
   
   // After creating a request object pass the object 
   // to fetch() function make a request or perform operations
   fetch(request)
   .then(response => {
      // Handling the response
   })
   .catch(error => {
      // Handling any errors if occur
   });
</script>

限制

流式請求是一項新功能，因此它有一些限制，它們是：

半雙工 - 要執行流式請求，我們必須將 duplex 選項設定為 half。如果您未在流式請求中設定此選項，則會收到錯誤。此選項表示請求主體是雙工流，其中雙工流是同時接收資料（可寫）和傳送資料（可讀）的流。

需要 CORS 並觸發預檢請求 - 如我們所知，流式請求的請求主體包含一個流，但沒有“Content-Length”頭部資訊。因此，對於此類請求，需要 CORS，並且它們始終會觸發預檢請求。此外，不允許使用 no-cors 流式請求。

在 HTTP/1.x 上不起作用 - 如果連線是 HTTP/1.x，則根據 HTTP/1.x 規則，它將拒絕 fetch。根據 HTTP/1.x 規則，請求和響應主體需要傳送 Content-Length 頭部資訊。以便另一方可以記錄已接收的資料量或更改格式以使用分塊編碼。分塊編碼很常見，但對於請求來說，它非常罕見。

伺服器端不相容性 - 一些伺服器不支援流式請求。因此，始終僅使用支援流式請求的伺服器，例如 NodeJS 等。

結論

這就是我們如何為流建立 Request 物件，或者我們可以說這是我們如何使用 fetch() 函式建立流式請求。流式請求對於傳送大檔案、即時資料處理、媒體流、連續資料饋送等很有用。現在，在下一篇文章中，我們將學習 Stream API 中的響應主體。

列印頁面