Axios的几种不同的responseType处理响应，以及blob与arraybuffer的解析

Java架构技术栈

于 2024-08-14 02:58:43 发布

阅读量42

点赞数

在使用 Axios 时，你可以通过设置 responseType 选项来指定如何处理响应数据。Axios 提供了几种不同的 responseType 选项，每种选项都会影响响应数据的格式。

以下是这些选项及其示例：

1. `responseType: 'json'`

这是默认选项，表示将响应数据解析为 JSON 对象。如果响应不是 JSON 格式，Axios 会自动尝试转换。（现代的前后端分离接口一般来说是以json格式来交互）

示例：

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // JSON 对象
  })
  .catch(error => {
    console.error(error);
  });

2. `responseType: 'text'`

此选项将响应数据处理为文本字符串。

示例：

axios.get('/api/text', { responseType: 'text' })
  .then(response => {
    console.log(response.data); // 纯文本字符串
  })
  .catch(error => {
    console.error(error);
  });

3. `responseType: 'blob'`

此选项将响应数据处理为 Blob 对象，适用于文件下载或图像处理等场景。

示例：

axios.get('/api/file', { responseType: 'blob' })
  .then(response => {
    const url = URL.createObjectURL(response.data);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
  })
  .catch(error => {
    console.error(error);
  });

或者显示图片

axios.get('/api/file', { responseType: 'blob' })
  .then(response => {
	 let img:any = document.querySelector('#image');
	 let url  = window.URL.createObjectURL(res.data);
	 img.src = url;
	 img.onload = () => {//等这个img对象完全加载src完毕就删除这个生成的blob对象。
	   window.URL.revokeObjectURL(url)
	 }
  })
  .catch(error => {
     console.error(error);
  });

4. `responseType: 'arraybuffer'`

此选项将响应数据处理为 ArrayBuffer 对象，适用于处理二进制数据。

示例：

axios.get('/api/audio', { responseType: 'arraybuffer' })
  .then(response => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    audioContext.decodeAudioData(response.data, buffer => {
      const source = audioContext.createBufferSource();
      source.buffer = buffer;
      source.connect(audioContext.destination);
      source.start(0);
    });
  })
  .catch(error => {
    console.error(error);
  });

5. `responseType: 'document'`

此选项将响应数据解析为文档对象（DOM 对象），适用于处理 HTML/XML 文档。

示例：

axios.get('/api/page', { responseType: 'document' })
  .then(response => {
    console.log(response.data); // DOM 对象
  })
  .catch(error => {
    console.error(error);
  });

6. `responseType: 'stream'`

在 Node.js 环境中使用，表示将响应数据处理为流。适用于大文件下载。

示例：

const fs = require('fs');
const axios = require('axios');

axios.get('/api/largefile', { responseType: 'stream' })
  .then(response => {
    response.data.pipe(fs.createWriteStream('largefile.txt'));
  })
  .catch(error => {
    console.error(error);
  });

使用说明

选择合适的 responseType 可以提高应用的效率和性能，尤其在处理大型文件或需要特定数据格式时。确保你选择的 responseType 与服务器返回的数据格式一致，否则可能会导致错误。

ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区。在 JavaScript 中，ArrayBuffer 通常用于处理原始二进制数据，比如文件内容、音视频数据、图像数据、加密数据等。它是 Web 应用程序中处理大量数据的基础类型之一。

`ArrayBuffer` 的典型内容

ArrayBuffer 的内容是原始的二进制数据，它不带有任何格式或结构信息。这使得它非常灵活，可以用来存储任何类型的二进制数据。具体的内容取决于数据的来源和用途。例如：

音频数据：可以包含 PCM 编码的音频样本。
图像数据：可以包含图像的像素值。
文件数据：可以包含从文件读取的原始字节。
网络数据：可以包含从网络接收的原始数据包。

示例代码解析

axios.get('/api/audio', { responseType: 'arraybuffer' })
  .then(response => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    audioContext.decodeAudioData(response.data, buffer => {
      const source = audioContext.createBufferSource();
      source.buffer = buffer;
      source.connect(audioContext.destination);
      source.start(0);
    });
  })
  .catch(error => {
    console.error(error);
  });

示例中的操作解释：

发送 GET 请求：

使用 Axios 向 /api/audio 端点发送 GET 请求。
设置 responseType 为 'arraybuffer'，这表示期望收到的响应数据是二进制的 ArrayBuffer 类型。

创建 AudioContext：

AudioContext 是 Web Audio API 的一部分，用于在 Web 上处理音频。它提供了多种处理和播放音频的方法。
代码使用 AudioContext 或 webkitAudioContext（在某些旧版浏览器中）来创建音频上下文实例。

解码音频数据：

使用 audioContext.decodeAudioData() 方法解码从服务器接收到的 ArrayBuffer 音频数据。
decodeAudioData() 方法会将 ArrayBuffer 解码为一个 AudioBuffer，后者是 Web Audio API 中的音频数据格式。