Fetch response.bytes() 方法

在处理网络请求时，获取服务器返回的数据是一个重要的步骤。Fetch API 提供了多种方法来处理响应数据，其中之一便是 response.bytes() 方法。这个方法允许开发者以二进制格式读取响应体的内容。下面我们将详细介绍 response.bytes() 方法的使用和相关概念。

使用场景

response.bytes() 方法通常用于需要将响应体作为原始二进制数据处理的情况。例如，在处理图像、音频或视频文件时，这种方法可以确保数据的完整性和原始性。

示例：下载一个二进制文件

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.bytes();
  })
  .then(bytes => {
    console.log('Binary data:', bytes);
    // 在这里，你可以使用 bytes 进行进一步处理，例如保存到本地文件系统
  })
  .catch(error => console.error('Error:', error));

方法详解

response.bytes() 方法返回一个 Promise 对象，该对象解析为一个 ArrayBuffer。ArrayBuffer 是一种用来表示通用的、固定长度的原始二进制数据缓冲区的对象。这种类型的数据不能直接访问，但可以通过类型化数组或 DataView 对象进行操作。

返回值类型

• Promise<ArrayBuffer>: 如果请求成功并且响应状态码为 200 到 299 之间，则返回一个 Promise，该 Promise 解析为 ArrayBuffer 对象。

错误处理

如果请求失败或者响应状态码不在 200 到 299 范围内，response.bytes() 方法会抛出错误。因此，你需要通过 .catch() 或者 try/catch 语句来捕获这些错误。

示例：错误处理

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.bytes();
  })
  .then(bytes => {
    console.log('Binary data:', bytes);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

使用类型化数组

虽然 response.bytes() 方法返回的是 ArrayBuffer，但在实际应用中，我们通常会将其转换为更易于操作的类型化数组。常见的类型化数组包括 Uint8Array、Int16Array 等。

示例：使用 Uint8Array

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.bytes();
  })
  .then(buffer => {
    const uint8array = new Uint8Array(buffer);
    console.log('Uint8Array:', uint8array);
    // 在这里，你可以使用 uint8array 进行进一步处理
  })
  .catch(error => console.error('Error:', error));

总结

response.bytes() 方法是 Fetch API 中处理二进制数据的重要工具。通过这个方法，我们可以轻松地获取到原始的二进制数据，并对其进行各种操作。在实际项目中，了解如何使用 response.bytes() 可以帮助我们更好地处理文件上传和下载等任务。

希望本章节的内容能够帮助你理解并掌握 response.bytes() 方法的应用。接下来，我们将继续探讨其他与 Fetch API 相关的方法和技巧。