在利用 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);
- });
此选项将响应数据处理为文本字符串。
示例：
- axios.get('/api/text', { responseType: 'text' })
- .then(response => {
- console.log(response.data); // 纯文本字符串
- })
- .catch(error => {
- console.error(error);
- });
此选项将响应数据处理为 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);
- });
此选项将响应数据处理为 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);
- });
此选项将响应数据解析为文档对象（DOM 对象），适用于处理 HTML/XML 文档。
示例：
- axios.get('/api/page', { responseType: 'document' })
- .then(response => {
- console.log(response.data); // DOM 对象
- })
- .catch(error => {
- console.error(error);
- });
在 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 中的音频数据格式。
- 播放音频：
- 创建一个 AudioBufferSourceNode 对象，它是一个音频源节点，可以播放 AudioBuffer 中的数据。
- 将解码后的 AudioBuffer 设置为音频源节点的缓冲区，并将其连接到音频上下文的目的地（通常是扬声器）。
- 调用 source.start(0) 开始播放音频。
ArrayBuffer 的常见用途
- 媒体处理：解码和播放音频、视频数据。
- 文件处理：读取和写入文件的原始字节内容。
- 数据转换：将二进制数据转换为其他格式，如文本、图像等。
- 网络通讯：处理低级网络协议的数据包。
通过利用 ArrayBuffer，开辟者可以精细地控制数据的处理和转换，适合必要高性能数据操作的应用场景。
Blob 和 ArrayBuffer 确实有一些相似之处，因为它们都可以用来处理二进制数据。然而，它们在利用场景和特性上还是有一些紧张的区别：
相似之处
- 二进制数据存储：Blob 和 ArrayBuffer 都可以用于存储和传输二进制数据，好比图像、音频、视频等文件内容。
- 浏览器支持：两者在现代浏览器中都有很好的支持，可以通过 JavaScript 举行操作。
不同之处
1. 创建方式与数据范例
- Blob：
- Blob（Binary Large Object）是一个文件状的对象，主要用于存储大量的二进制数据。
- 它可以包罗任意数量的 ArrayBuffer、Uint8Array 等范例的数据，并且可以设置 MIME 范例。
- Blob 通常用于表示和处理不可变的、类文件的数据，如图像、视频等。
- ArrayBuffer：
- ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区。
- 它不能直接表示具体的文件范例，更像是一块原始的内存空间。
- 主要用于处理低级数据操作，如音频处理、加密解密、数据解析等。
2. 特性
- Blob：
- Blob 是不可变的，也就是说，一旦创建就不能修改其内容。可以通过切片 (slice()) 方法创建一个新的 Blob。
- 它可以直接用来创建 URL（通过 URL.createObjectURL()），方便在 Web 页面上利用，例如在 <img> 标签中显示图片。
- 支持获取数据巨细和 MIME 范例等属性。
- ArrayBuffer：
- ArrayBuffer 是可变的，可以直接读取或写入其内容，通过视图对象（如 Uint8Array、DataView 等）操作。
- 主要用于处理必要直接访问和修改二进制数据的场景。
- 没有内建的 MIME 范例或巨细属性，必要额外的逻辑来处理这些信息。
3. 典范利用场景
- Blob：
- 适用于文件上传、下载、展示等场景，如用户上传的图像、生成 PDF 文件等。
- 通过 XHR 请求或 Fetch API 获取数据时，也常用来表示服务器返回的二进制文件。
- ArrayBuffer：
- 适用于必要精细控制的二进制数据处理场景，如解析自定义数据格式、处理音视频解码、加密算法等。
- 在 WebSocket 或其他二进制协议通讯中，也常用来表示传输的数据。
总结
- 虽然 Blob 和 ArrayBuffer 都可以用于处理二进制数据，但它们的计划目标和利用场景有所不同。
- Blob 更像是一个高条理的二进制文件容器，适合处理文件和数据块，而 ArrayBuffer 是一个底层的二进制数据结构，更适合必要直接操作字节的场景。
- 根据具体需求选择符合的数据范例，可以更有效地处理和优化数据操作。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
