Fetch response.arrayBuffer() 方法

使用 response.arrayBuffer() 方法可以从 Fetch API 请求的响应中获取二进制数据，并将其转换为 ArrayBuffer 对象。这种数据格式通常用于处理图像、音频、视频等二进制文件。本章将详细介绍如何使用 response.arrayBuffer() 方法来处理这些类型的响应。

获取二进制数据

response.arrayBuffer() 方法返回一个 Promise，该 Promise 在解析时会提供一个 ArrayBuffer 对象。下面是一个简单的示例，展示了如何从服务器获取图像并将其转换为二进制数据：

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

处理 ArrayBuffer 数据

获取到的 ArrayBuffer 对象可以进一步处理，例如将其转换为其他格式或直接传递给需要二进制数据的函数。以下是一些常见的处理方法：

转换为 Blob 对象

你可以将 ArrayBuffer 对象转换为 Blob 对象，以便进一步操作或存储：

fetch('https://example.com/image.png')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const blob = new Blob([buffer], { type: 'image/png' });
    console.log('Blob object:', blob);
    // 可以将 Blob 对象保存到本地或传递给其他函数
  });

转换为 Data URL

你也可以将 ArrayBuffer 对象转换为 Data URL，这是一种可以直接嵌入到 HTML 或 CSS 中的格式：

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const array = new Uint8Array(buffer);
    let binary = '';
    for (let i = 0; i < array.length; i++) {
      binary += String.fromCharCode(array[i]);
    }
    const dataUrl = `data:image/png;base64,${btoa(binary)}`;
    console.log('Data URL:', dataUrl);
    // 可以直接将 Data URL 插入到 img 标签中
  });

使用 ArrayBuffer 的实际场景

显示图像

你可以将获取到的图像数据直接显示在页面上：

<img id="image" src="" alt="Fetched Image">

// javascriptcn.com 代码示例
fetch('https://example.com/image.png')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const array = new Uint8Array(buffer);
    let binary = '';
    for (let i = 0; i < array.length; i++) {
      binary += String.fromCharCode(array[i]);
    }
    const dataUrl = `data:image/png;base64,${btoa(binary)}`;
    document.getElementById('image').src = dataUrl;
  });

下载文件

你可以创建一个下载链接，让用户下载获取到的文件：

<a id="downloadLink" href="#">Download</a>

fetch('https://example.com/document.pdf')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const blob = new Blob([buffer], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    document.getElementById('downloadLink').href = url;
    document.getElementById('downloadLink').download = 'document.pdf';
  });

错误处理

由于 response.arrayBuffer() 返回的是一个 Promise，因此你需要处理可能发生的错误。例如，网络请求失败或响应不是预期的类型时，应该捕获并处理这些错误：

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

通过以上步骤，你可以灵活地使用 response.arrayBuffer() 方法来处理各种二进制数据，满足不同的应用场景需求。