Fetch API - 处理二进制数据
二进制数据是以二进制格式存储的数据，而不是文本格式，例如 new Uint8Array([0x43, 0x21])。它包括图像、音频、视频和其他非纯文本文件。我们可以在 Fetch API 中发送和接收二进制数据。在 Fetch API 中处理二进制数据时，设置正确的 headers 和 response types 非常重要。对于二进制数据，我们使用 "Content-Type": "application/octet-stream"，并将 "responseType" 属性设置为 "arraybuffer" 或 "blob"，以表示接收到的是二进制数据。
让我们通过以下示例来了解如何在 Fetch API 中发送和接收二进制数据。
发送二进制数据
要发送二进制数据，我们使用 XMLHttpRequest 的 send() 方法，它可以轻松使用 ArrayBuffer、Blob 或 File 对象传输二进制数据。
示例
在以下程序中，我们创建一个程序，将二进制数据发送到服务器。首先我们创建二进制数据，然后使用 Blob() 构造函数将二进制数据转换为 Blob。该构造函数接受两个参数：二进制数据和二进制数据的 headers。然后我们创建一个 FormData 对象，并将 Blob 添加到 FormData 对象中。然后我们使用 fetch() 函数向服务器发送请求，处理服务器返回的响应，并处理可能发生的错误。
<!DOCTYPE html>
<html>
<body>
<script>
// 二进制数据
var BinaryData = new Uint8Array([0x32, 0x21, 0x45, 0x67]);
// 将二进制数据转换为 Blob
var blobObj = new Blob([BinaryData], {type: 'application/octet-stream'});
// 创建 FormData 对象
var obj = new FormData();
// 将数据添加到对象中
// 这里 myfile 是表单字段的名称
obj.append("myfile", blobObj);
// 使用 POST 请求发送数据
fetch("https://jsonplaceholder.typicode.com/todos", {
// 添加 POST 请求
method: "POST",
// 添加要发送的 body
body: obj
})
// 处理响应
.then(response =>{
if (response.ok){
console.log("二进制数据发送成功");
}
})
// 处理错误
.catch(err=>{
console.log("发现错误：", err)
});
</script>
<h2>已发送的二进制数据</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>
// 使用 GET 请求接收数据
fetch("https://jsonplaceholder.typicode.com/todos", {
// 添加 GET 请求
method: "GET",
// 设置 headers
headers: {
'Content-Type': 'application/octet-stream',
},
// 将响应类型设置为 arraybuffer
responseType: "arraybuffer"
})
// 处理接收到的二进制数据
.then(response =>{
if (response.ok){
return response.arrayBuffer();
}
console.log("Binary data send Successfully");
})
.then(arraybuffer => console.log("Binary data received Successfully"))
// 处理错误
.catch(err=>{
console.log("Found error:", err)
});
</script>
<h2>Binary Data Example</h2>
</body>
</html>
输出
结论
这就是我们如何使用 Fetch API 处理二进制数据。要处理二进制数据，我们需要将二进制数据转换为适当的数据格式。我们还可以以文件、字符串、ArrayBuffer 和 Blob 的形式发送二进制数据。在下一章中，我们将学习如何使用 Fetch API 获取状态码。