axios 的 responseType 属性是用来指定响应数据的类型的。它可以设置为以下几种类型：

  • "arraybuffer"：响应数据将会以 ArrayBuffer 类型返回，适用于二进制数据的场景。
  • "blob"：响应数据将会以 Blob 类型返回，适用于文件下载的场景。
  • "document"：响应数据将会以 Document 类型返回，适用于 HTML 或 XML 文档的场景。
  • "json"：响应数据将会以 JSON 对象返回，适用于 API 请求的场景。
  • "text"：响应数据将会以字符串类型返回，适用于文本数据的场景。

在使用 axios 发送请求后，可以通过设置 responseType 属性来指定希望获取的数据类型。下面我们将详细介绍每种类型的使用方法和示例代码。

"arraybuffer"

如果需要处理二进制数据，比如音频、视频等，就可以使用 "arraybuffer"。在指定 "arraybuffer" 后，响应数据将以 ArrayBuffer 类型返回。可以通过 new Uint8Array(response.data) 将 ArrayBuffer 转换为 Uint8Array 类型，进一步处理数据。

以下是一个使用 "arraybuffer" 获取音频数据的示例代码：

axios.get(url, {
  responseType: 'arraybuffer'
}).then(response => {
  const audioData = new Uint8Array(response.data);
  // 处理音频数据
}).catch(error => {
  // 处理错误
});

"blob"

如果需要下载文件，可以使用 "blob"。在指定 "blob" 后，响应数据将以 Blob 类型返回。可以通过创建一个下载链接，然后将 Blob 对象指定给链接的 href 属性，从而实现文件下载。

以下是一个使用 "blob" 下载文件的示例代码：

axios.get(url, {
  responseType: 'blob'
}).then(response => {
  const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'file.txt');
  document.body.appendChild(link);
  link.click();
}).catch(error => {
  // 处理错误
});

"document"

如果需要处理 HTML 或 XML 文档，可以使用 "document"。在指定 "document" 后，响应数据将以 Document 类型返回。可以通过直接操作 Document 对象来提取所需的数据。

以下是一个使用 "document" 处理 HTML 文档的示例代码：

axios.get(url, {
  responseType: 'document'
}).then(response => {
  const title = response.data.querySelector('title').textContent;
  // 处理标题数据
}).catch(error => {
  // 处理错误
});

"json"

如果需要处理 API 请求返回的 JSON 数据，可以使用 "json"。在指定 "json" 后，响应数据将以 JSON 对象返回。可以直接访问 JSON 对象的属性和方法，获取所需的数据。

以下是一个使用 "json" 处理 API 请求的示例代码：

axios.get(url, {
  responseType: 'json'
}).then(response => {
  const data = response.data;
  // 处理数据
}).catch(error => {
  // 处理错误
});

"text"

如果需要处理文本数据，可以使用 "text"。在指定 "text" 后，响应数据将以字符串类型返回。可以直接访问字符串的属性和方法，处理文本数据。

以下是一个使用 "text" 处理文本数据的示例代码：

axios.get(url, {
  responseType: 'text'
}).then(response => {
  const text = response.data;
  // 处理文本数据
}).catch(error => {
  // 处理错误
});

以上是 axios 的 responseType 属性的用法和示例代码。根据不同的需求，可以选择合适的类型来处理响应数据。希望本文能够帮助你更好地理解和使用 axios。