Fetch API - 处理二进制数据_AJAX 菜鸟教程

二进制数据是二进制格式的数据，而不是文本格式的数据，例如 new Uint8Array（[0x43， 0x21]）。它包括图像、音频、视频和其他非纯文本文件。我们可以在 Fetch API 中发送和接收二进制数据。在 Fetch API 中处理二进制数据时，设置正确的标头和响应类型非常重要。对于二进制数据，我们使用 “Content-Type”： “application/octet-stream” 和 “responseType” 属性来表示收到二进制数据。

让我们使用以下示例了解如何在 Fetch API 中发送和接收二进制数据。

发送二进制数据

为了发送二进制数据，我们使用 XMLHttpRequest 的 send（）方法，该方法可以使用 ArrayBuffer、Blob 或 File 对象轻松传输二进制数据。

例

在下面的程序中，我们创建了一个程序，该程序将向服务器发送二进制数据。因此，首先我们创建二进制数据，然后使用 Blob（）构造函数将二进制数据转换为 Blob。这里，这个构造函数接受两个参数：二进制数据和二进制数据的 headers。然后我们创建一个 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（）中，我们定义了 headers，告诉浏览器我们期待一个二进制响应，并将 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 处理二进制数据的方法。要处理二进制数据，我们需要将二进制数据转换为适当的数据格式。我们还可以在 file、string、ArrayBuffer 和 Blob 中发送二进制数据。现在在下一章中，我们将学习如何使用 Fetch API 查找状态码。

<< Fetch API - 上传文件 Fetch API - 状态代码 >>