Axios的差别responseType的利用场景

一、arraybuffer
应用场景：用于接收二进制数据，通常是文件下载或处置处罚图片、音频、视频等二进制数据的环境。

1. axios.get('https://example.com/some-binary-data', { responseType: 'arraybuffer' })
2.   .then(response => {
3.     // response.data 包含二进制数据
4.   });

复制代码

二、blob
应用场景：与arraybuffer类似，用于接收二进制数据，但通常用于文件下载等场景。

1. axios.get('https://example.com/some-image.jpg', { responseType: 'blob' })
2.   .then(response => {
3.     // response.data 包含 Blob 对象，可以用于创建图片URL或进行文件下载
4.     const imageUrl = URL.createObjectURL(response.data);
5.     // 使用 imageUrl 显示图像
6.   });

复制代码

三、document
应用场景：用于将响应数据解析为 HTML 文档对象，实用于获取和操纵HTML文档的环境

1. axios.get('https://example.com/some-html-page', { responseType: 'document' })
2.   .then(response => {
3.     // response.data 包含解析后的 HTML 文档对象，可以用于操作DOM或提取内容
4.     const title = response.data.querySelector('title').textContent;
5.   });

复制代码

四、json
应用场景：用于将响应数据解析为 JSON 对象，实用于REST API和Web服务的调用。

1. axios.get('https://example.com/api/data', { responseType: 'json' })
2.   .then(response => {
3.     // response.data 包含解析后的 JSON 数据，可以用于处理API响应
4.     console.log(response.data);
5.   });

复制代码

五、text
应用场景：用于将响应数据解析为纯文本，实用于文本内容的获取。

1. axios.get('https://example.com/some-text-data', { responseType: 'text' })
2.   .then(response => {
3.     // response.data 包含文本数据，可以用于显示文本内容
4.     console.log(response.data);
5.   });

复制代码

六、stream
应用场景：用于处置处罚响应数据流，实用于大文件下载或需要逐行处置处罚数据的环境。

1. axios.get('https://example.com/large-file', { responseType: 'stream' })
2.   .then(response => {
3.     // response.data 是一个可读流，可以逐行处理数据
4.     response.data.on('data', chunk => {
5.       // 处理每个数据块
6.     });
7.   });

复制代码

1. const axios = require('axios');
2. const fs = require('fs');
4. axios({
5.   method: 'get',
6.   url: 'https://example.com/largefile.zip',
7.   responseType: 'stream'
8. })
9.   .then(response => {
10.     const writer = fs.createWriteStream('largefile.zip');
12.     response.data.pipe(writer);
14.     writer.on('finish', () => {
15.       console.log('文件下载完成');
16.     });
17.   })
18.   .catch(error => {
19.     console.error('下载出错：', error);
20.   });

复制代码

七、区别
1.arraybuffer与blob

1. `arraybuffer`和`blob`都用于接收二进制数据，但它们在处理和使用二进制数据时有一些区别：
3. 1. 数据类型:
4.    - `arraybuffer`: 当使用`responseType: 'arraybuffer'`时，响应数据将以ArrayBuffer类型返回。ArrayBuffer是JavaScript中的数据类型，用于表示通用的二进制数据缓冲区，通常不包含关于数据内容的具体信息，因此你需要自己解释和处理数据。
5.    - `blob`: 当使用`responseType: 'blob'`时，响应数据将以Blob对象类型返回。Blob是表示二进制数据的一种标准化方式，它包括关于数据类型（MIME类型）和长度的信息，这使得它更适合处理文件下载和处理包含额外元数据的二进制数据。
7. 2. 用途:
8.    - `arraybuffer`: 适用于需要直接操作二进制数据的情况，如图像处理、音频处理、WebSocket通信等。通常，你需要根据预定的数据格式对ArrayBuffer进行解析。
9.    - `blob`: 适用于处理文件下载、上传、读取本地文件以及需要保留数据的元数据信息（如文件名和MIME类型）的情况。Blob通常更适合处理与文件相关的二进制数据。
11. 3. 处理方式:
12.    - `arraybuffer`: 你需要手动解析和处理ArrayBuffer中的数据，因为它不包含关于数据类型或结构的信息。
13.    - `blob`: 由于Blob包含了数据类型和其他元数据信息，你可以更容易地处理文件下载、上传等操作，以及在浏览器中创建可预览的链接。
15. 综上所述，选择使用`arraybuffer`或`blob`取决于你的具体需求。如果需要处理纯粹的二进制数据，`arraybuffer`更合适，但如果需要处理带有元数据信息的二进制数据，如文件，那么`blob`更适合。

复制代码

2.stream与blob

1. `Stream` 和 `Blob` 是两种不同的数据类型，用于处理数据的方式有所不同，它们通常用于不同的上下文中。
3. 1. **Stream（流）**：
4.    - `Stream` 是一个通用的数据处理模型，通常与数据的输入和输出相关。
5.    - 在Node.js中，`Stream` 是一个重要的概念，它用于以流式方式处理数据，特别适用于处理大型数据集，如文件、网络数据、或通过管道传输的数据。
6.    - 通过使用流，数据可以一块一块地读取或写入，而不需要将整个数据加载到内存中。这对于内存效率非常重要，特别是在处理大文件或网络数据时。
7.    - 流可以是可读流（Readable Stream）用于从数据源读取数据，也可以是可写流（Writable Stream）用于将数据写入目标。
9. 2. **Blob（二进制大对象）**：
10.    - `Blob` 是一种特定于浏览器环境的数据类型，通常用于处理二进制数据，如图像、音频、视频、或通过Web API获取的二进制数据。
11.    - `Blob` 表示二进制数据的不可变对象。它通常用于创建对象URL，以便在网页中显示或下载二进制数据，例如通过`<img>`标签或`<a>`标签的`href`属性。
12.    - `Blob` 可以是任何类型的二进制数据，它具有一些方法，如`slice`，允许你在需要时截取部分数据。
14. 总之，主要的区别在于上下文和使用场景。`Stream` 通常用于Node.js中以流式方式处理大型数据，而 `Blob` 通常用于浏览器中处理二进制数据的表示和显示。在浏览器中，你通常将数据保存在 `Blob` 中，然后可以将它转换为`Blob URL`，以在网页上显示或下载二进制数据。在Node.js中，你通常使用`Stream`来处理文件、网络数据等。

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。