Fetch response.blob() 方法

response.blob() 方法是 Fetch API 的一部分，用于从响应中获取二进制数据。此方法返回一个 Promise，该 Promise 解析为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象。Blob 表示的数据不一定是一个 JavaScript 字符串，它可以包含二进制数据。

使用场景

当你需要处理非文本数据时，比如图像、视频或音频文件，你可以使用 response.blob() 方法。这在上传和下载文件时非常有用。

基本用法

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    // 处理 Blob 数据
    console.log(blob);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

在这个例子中，我们从指定的 URL 获取一个 PNG 图像，并将其解析为 Blob 对象。之后，我们可以对这个 Blob 对象进行操作，例如显示它或上传到服务器。

Blob 对象的特性

Blob 对象提供了一些有用的属性和方法来处理二进制数据：

• size：返回 Blob 的大小，以字节为单位。
• type：返回 Blob 的 MIME 类型。
• **slice()**：返回一个新的 Blob 对象，包含当前 Blob 对象中的部分数据。

显示 Blob 数据

为了显示 Blob 数据，我们可以创建一个 URL 来引用 Blob 对象，然后将这个 URL 设置为图像元素的 src 属性。

// javascriptcn.com 代码示例
<img id="image" />
<script>
  fetch('https://example.com/image.png')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const url = URL.createObjectURL(blob);
      document.getElementById('image').src = url;
    })
    .catch(error => {
      console.error('There has been a problem with your fetch operation:', error);
    });
</script>

Blob 对象作为文件上传

在处理文件上传时，你可以将 Blob 对象转换为 File 对象，或者直接将 Blob 传递给 FormData 对象。

// javascriptcn.com 代码示例
const blob = await (await fetch('https://example.com/image.png')).blob();

const formData = new FormData();
formData.append('file', blob, 'image.png');

fetch('https://example.com/upload', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们首先从 URL 获取 Blob 对象，然后将这个 Blob 对象添加到 FormData 对象中。最后，我们将 FormData 对象作为请求体发送到服务器。

注意事项

• 在使用 response.blob() 方法之前，确保响应的状态码是成功的（如 200 OK），否则会抛出错误。
• Blob 对象是不可变的，因此不能直接修改其内容。如果需要修改 Blob 的内容，可以先将其转换为其他格式，如 ArrayBuffer，再进行操作。
• 当处理大量数据时，注意 Blob 对象可能会占用大量的内存空间。在这种情况下，可以考虑使用流式处理或其他优化策略。

通过这些示例和解释，你应该能够更好地理解如何在前端开发中使用 response.blob() 方法来处理二进制数据。