Fetch API - 處理二進位制資料

二進位制資料是指以二進位制格式而不是文字格式存在的資料，例如 new Uint8Array([0x43, 0x21])。它包括影像、音訊、影片和其他非純文字檔案。我們可以在 Fetch API 中傳送和接收二進位制資料。在 Fetch API 中處理二進位制資料時，設定正確的頭部資訊和響應型別非常重要。對於二進位制資料，我們使用 "Content-Type": "application/octet-stream" 和 "responseType" 屬性設定為 "arraybuffer" 或 "blob"，這表示接收到的資料是二進位制資料。

讓我們透過以下示例瞭解如何在 Fetch API 中傳送和接收二進位制資料。

傳送二進位制資料

要傳送二進位制資料，我們使用 XMLHttpRequest 的 send() 方法，該方法可以使用 ArrayBuffer、Blob 或 File 物件輕鬆傳輸二進位制資料。

示例

在下面的程式中，我們建立一個程式將二進位制資料傳送到伺服器。首先，我們建立二進位制資料，然後使用 Blob() 建構函式將二進位制資料轉換為 Blob。此建構函式接受兩個引數：二進位制資料和二進位制資料的頭部資訊。然後，我們建立一個 FormData 物件並將 Blob 新增到 FormData 物件。然後，我們使用 fetch() 函式將請求傳送到伺服器，然後處理伺服器返回的響應，並處理髮生的錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Binary data 
   var BinaryData = new Uint8Array([0x32, 0x21, 0x45, 0x67]);

   // Converting binary data into Blob
   var blobObj = new Blob([BinaryData], {type: 'application/octet-stream'});

   // Creating FormData object
   var obj = new FormData();

   // Add data to the object
   // Here myfile is the name of the form field
   obj.append("myfile", blobObj);

   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",

      // Adding body which we want to send
      body: obj
   })
   // Handling the response
   .then(response =>{
      if (response.ok){
         console.log("Binary data send Successfully");
      }
   })
   // Handling the error
   .catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Sent Binary Data</h2>
</body>
</html>

輸出

接收二進位制資料

在 Fetch API 中，接收二進位制資料意味著在發出請求後從伺服器檢索響應資料。要接收二進位制資料，我們必須將 responseType 設定為 ArrayBuffer() 或 Blob() 的正確值。

示例

在下面的程式中，我們建立一個程式將從伺服器接收二進位制資料。我們使用 fetch() 函式從給定的 URL 獲取二進位制資料。在 fetch() 中，我們定義頭部資訊，告訴瀏覽器我們期望二進位制響應，並將 responseType 設定為 arraybuffer，以便告訴瀏覽器您正在接收 ArrayBuffer 作為響應。然後，我們在 .then() 塊中接收 promise 並檢查狀態是否為 OK。如果狀態為 OK，則使用 arrayBuffer() 函式將響應轉換為 ArrayBuffer。下一個 .then() 處理返回的二進位制資料並相應地顯示資料。.catch() 函式處理發生的錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Receiving data using GET request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding Get request
      method: "GET",

      // Setting headers
      headers: {
         'Content-Type': 'application/octet-stream',
      },
      // Setting response type to arraybuffer 
      responseType: "arraybuffer"
   })

   // Handling the received binary data
   .then(response =>{
      if (response.ok){
         return response.arrayBuffer();
      }
      console.log("Binary data send Successfully");
   })
   .then(arraybuffer => console.log("Binary data received Successfully"))

   // Handling the error
   .catch(err=>{
      console.log("Found error:", err)
   });
</script>
   <h2>Binary Data Example</h2>
</body>
</html>

輸出

結論

這就是我們如何使用 Fetch API 處理二進位制資料的方法。為了處理二進位制資料，我們需要將二進位制資料轉換為適當的資料格式。我們也可以以檔案、字串、ArrayBuffer 和 Blob 的形式傳送二進位制資料。在下一章中，我們將學習如何使用 Fetch API 查詢狀態碼。

列印頁面