Ajax 简明教程
Fetch API - Handling Binary Data
二进制数据是以二进制格式而不是文本格式存在的数据，例如 new Uint8Array([0x43, 0x21])。它包括图像、音频、视频和不是纯文本的其他文件。我们可以在 Fetch API 中发送和接收二进制数据。在 Fetch API 中使用二进制数据时，设置正确的标头和响应类型很重要。对于二进制数据，我们使用 "Content-Type": "application/octet-stream" 和 "responseType" 属性，将其设置为 "arraybuffer" 或 "blob"，表明收到了二进制数据。
让我们了解如何使用以下示例在 Fetch API 中发送和接收二进制数据。
Sending Binary Data
要发送二进制数据，我们使用 XMLHttpRequest 的 send() 方法，该方法可以使用 ArrayBuffer、Blob 或 File 对象轻松传输二进制数据。
Example
在以下程序中，我们创建一个将二进制数据发送到服务器的程序。因此，我们首先创建二进制数据，然后使用 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>
Receiving Binary Data
在 Fetch API 中，接收二进制数据意味着在发出请求后从服务器中检索响应数据。要接收二进制数据，我们必须设置 responseType 的正确值，可能是 ArrayBuffer() 或 Blob()。
Example
在以下程序中，我们创建了一个将从服务器接收二进制数据的程序。所以我们使用 fetch() 函数从给定的 URL 获取二进制数据。在 fetch() 中我们定义了标题，告知浏览器我们正在等待二进制响应，并将响应类型设置为 arraybuffer，以便告诉浏览器您收到的响应是 ArrayBuffer。然后我们在 .then() 块中接收诺言，并检查状态是否为确定。如果状态为确定，那么借助 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>