Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析

在前端开发的广阔天地中,Axios 犹如一颗璀璨的明星,为我们与服务器之间的通信搭建起坚实的桥梁。其中,responseType 属性更是赋予了我们灵活处理服务器响应的强大能力。

一、Axios 的 responseType 属性值及示例

1.arraybuffer

  • 当我们将 responseType 设置为这个值时,Axios 会把服务器的响应体作为一个 ArrayBuffer 对象返回。这在处理二进制数据时非常有用。
  • 示例代码如下:
axios.get('/your-api-url', {responseType: 'arraybuffer'
}).then(response => {const arrayBuffer = response.data;const view = new Uint8Array(arrayBuffer);for (let i = 0; i < view.length; i++) {console.log(view[i]);}
});

2.blob

  • 此设置会使 Axios 将响应体作为一个 Blob 对象返回。Blob 对象可以存储各种类型的二进制数据。
  • 示例:
axios.get('/your-api-url', {responseType: 'blob'
}).then(response => {const blob = response.data;const reader = new FileReader();reader.onload = function() {const result = reader.result;console.log(result);};reader.readAsText(blob);
});

3.document

  • 选择这个值,Axios 会将响应体作为一个 HTML 文档或 XML 文档对象返回,为处理特定类型的文档数据提供了便利。
  • 示例代码:
axios.get('/your-api-url', {responseType: 'document'
}).then(response => {const document = response.data;console.log(document.body.innerHTML);
});

4.json

  • 这是 Axios 的默认 responseType 值。它会将响应体解析为一个 JSON 对象,方便我们在前端进行数据处理。
  • 示例:
axios.get('/your-api-url').then(response => {const jsonData = response.data;console.log(jsonData);
});

5.text

  • 设置为这个值时,Axios 会将响应体作为一个字符串返回,适用于处理纯文本数据。
  • 示例代码:
axios.get('/your-api-url', {responseType: 'text'
}).then(response => {const text = response.data;console.log(text);
});

二、Blob 与 ArrayBuffer 的解析

1.Blob 的解析

  • Blob(Binary Large Object)是一种用于存储二进制数据的对象。当我们通过 Axios 的 responseType 设置为 'blob' 获得 Blob 对象后,可以使用多种方法进行解析。
  • 例如:
axios.get('/your-api-url', {responseType: 'blob'
}).then(response => {const blob = response.data;const reader = new FileReader();reader.onload = function() {const result = reader.result;console.log(result);};reader.readAsText(blob);
});

此外,FileReader 对象还提供了 readAsDataURLreadAsArrayBuffer 等方法,可以根据具体需求选择合适的解析方式。

2. ArrayBuffer 的解析

  • ArrayBuffer 是用于表示固定长度的二进制数据缓冲区的对象。当 responseType 为 'arraybuffer' 时,我们可以通过创建不同的 TypedArray 对象来解析 ArrayBuffer。
  • 示例如下:
axios.get('/your-api-url', {responseType: 'arraybuffer'
}).then(response => {const arrayBuffer = response.data;const view = new Uint8Array(arrayBuffer);for (let i = 0; i < view.length; i++) {console.log(view[i]);}
});

除了 Uint8Array,还可以使用 Int8ArrayUint16ArrayInt16Array 等 TypedArray 对象进行解析。

三、总结

Axios 的 responseType 属性为我们提供了丰富的选择,使我们能够根据服务器返回的数据类型灵活地处理响应。在处理二进制数据时,'blob' 和 'arraybuffer' 这两个 responseType 值以及相应的解析方法,为我们开辟了更多的数据处理途径。通过合理运用这些特性,我们可以在前端开发中更加高效地处理服务器响应,为用户带来更好的体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在PHP中使用UTF-8编码防止乱码需要注意以下几点‌:

在PHP中使用UTF-8编码防止乱码需要注意以下几点‌&#xff1a; ‌设置PHP文档编码为UTF-8‌&#xff1a;在PHP代码的最开始使用header()函数设置文档的编码为UTF-8。例如&#xff1a;header("Content-Type: text/html; charsetutf-8");‌12。 ‌确保文件编码为UTF-8…

【python GUI编码入门-19】Tkinter事件处理:按钮点击与响应

哈喽,大家好,我是木头左! 本文将深入探讨Tkinter中的事件处理机制,特别是如何响应按钮点击事件。将从基础开始,逐步深入了解,最终让你能够熟练地处理按钮点击事件,并构建复杂的应用程序。 为什么需要事件处理? 在GUI应用程序中,事件处理是核心部分。用户与应用程序的…

【循环引用及格式化输出】

垃圾回收机制 当一个值在内存中直接引用跟间接引用的量为0时&#xff0c;&#xff08;即这个值没有任何入口可以找到它&#xff09;那么这个值就会被清空回收♻️&#xff0c;释放内存空间&#xff1b; 列表在内存中的存储方式 1&#xff09;引用计数的两种方式 x "ea…

从0开始学习Linux——文本编辑器

往期目录&#xff1a; 1、从0开始学习Linux——Linux简介&安装 2、从0开始学习Linux——搭建属于自己的Linux系统 我们通过前面教程的学习已经了解了什么是Linux&#xff0c;并且我们也定制安装了属于我们自己的一个Linux系统。从这个章节开始我们将开始学习如何去操作Linu…

“北斗三号”如何赋能工业物联网

北斗三号是我国独立自主研发的第三代卫星导航系统&#xff0c;是北斗卫星导航系统的重要组成部分。北斗三号系统具有全球覆盖能力&#xff0c;除了提供基本的定位、导航、授时服务外&#xff0c;还提供高精度和短报文通信服务等。针对产业物联网应用&#xff0c;北斗三号也发挥…

相关衍生 pika+mongo

衍生相关 pikamongo 很多平台不提供完整的数据展示, 翻页只能翻几页,不过提供相关推荐等方法可获取更多的数据; 使用 rabbitmq 是因为数据量可能有几十上百万, 且能持久化 mongo对于数据并不实时的更新到查询里 def main():# mongodb# client MongoClient(localhost, 27017)cl…

Odoo | 免费开源ERP:汽车及零配件行业信息化解决方案

文 / 开源智造 Odoo亚太金牌服务 概述 围绕汽车行业产业链上下游企业的整体业务主线&#xff0c;提供面向汽车主机厂整车个性化制造解决方案&#xff0c;产业链上下游一体化协同解决方案&#xff0c;数字化精益制造解决方案、全价值链质量管理解决方案&#xff0c;数字化运营解…

【Linux】【守护进程】总结整理

守护进程&#xff08;Daemon&#xff09;是运行在后台的进程&#xff0c;通常没有与之关联的控制终端。守护进程在启动后会脱离控制终端&#xff0c;并继续在后台运行&#xff0c;即使用户退出登录或者终端关闭也不会影响它们的运行。守护进程常用于提供网络服务、定期执行任务…

Spring Cloud微服务:构建弹性、可扩展的分布式系统

Spring Cloud微服务&#xff1a;构建弹性、可扩展的分布式系统 在当今的软件开发领域&#xff0c;微服务架构已经成为构建复杂应用的首选方案。微服务架构通过将应用拆分为多个独立的服务&#xff0c;每个服务专注于单一的业务功能&#xff0c;从而提高了系统的可维护性、可扩…

vue中html如何转成pdf下载,pdf转base64,忽略某个元素渲染在pdf中,方法封装

一、下载 html2Canvas jspdf npm install jspdf html2canvas二、封装转换下载方法 htmlToPdf.js import html2Canvas from html2canvas import JsPDF from jspdf/*** param {*} reportName 下载时候的标题* param {*} isDownload 是否下载默认为下载&#xff0c;传false不…

Docker配置及简单应用

谈论/理解 Docker 的常用核心部分&#xff0c;以下皆在 Ubuntu 操作系统下进行 1 国内源安装 Docker-ce 1.1 配置 Linux 内核流量转发 因为docker和宿主机的端口映射&#xff0c;本质是内核的流量转发功能&#xff0c;所以要对其进行配置 1.1.1 未配置流量转发 如果没有配置流…

火山引擎云服务docker 安装

安装 Docker 登录云服务器。 执行以下命令&#xff0c;添加 yum 源。 yum update -y yum install epel-release -y yum clean all yum list依次执行以下命令&#xff0c;添加Docker CE镜像源。更多操作请参考Docker CE镜像。 # 安装必要的一些系统工具 sudo yum install -y yu…

探索数据科学与大数据技术专业本科生的广阔就业前景

随着信息技术的不断发展&#xff0c;数据科学与大数据技术已经成为各大行业的关键推动力。在这样一个数据驱动的时代&#xff0c;越来越多的企业依赖数据来驱动决策、优化运营和创造价值。因此&#xff0c;数据科学与大数据技术专业的本科生在就业市场上具有广阔的前景和多样的…

CSS例子: 横向排列的格子

效果 HTML <view class"content"><view class"item" v-for"item of 5">{{item}}</view></view> CSS .content {height: 100vh;display: flex;flex-direction: row; flex-wrap: wrap;align-content: flex-start;backgro…

智能家居的未来:AI让生活更智能还是更复杂?

内容概要 智能家居的概念源于将各种家居设备连接到互联网&#xff0c;并通过智能技术进行控制和管理。随着人工智能的迅速发展&#xff0c;这一领域也迎来了前所未有的机遇。从早期简单的遥控器到如今可以通过手机应用、语音助手甚至是环境感应进行操作的设备&#xff0c;智能…

ios打包文件上传App Store windows工具

在苹果开发者中心上架IOS APP的时候&#xff0c;在苹果开发者中心不能直接上传打包文件&#xff0c;需要下载mac的xcode这些工具进行上传&#xff0c;但这些工具无法安装在windows或linux电脑上。 这里&#xff0c;我们可以不用xcode这些工具来上传&#xff0c;可以用国内的香…

ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染

一、组件基础 1.什么是ArkTS ArkTS是HarmoyOS优选的助力应用开发的语言&#xff0c;ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步的扩展&#xff0c;继承了TS所有的特性&#xff0c;是TS的超集。 扩展的能力如下&#xff1a; 基本语法 …

连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常

启动kafka后&#xff0c;连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient) 检查kafka运行日志&#xff0c;报The broker is trying to join the wrong clu…

全文检索ElasticSearch到底是什么?

学习ElasticSearch之前&#xff0c;我们先来了解一下搜索 1 搜索是什么 ① 概念&#xff1a;用户输入想要的关键词&#xff0c;返回含有该关键词的所有信息。 ② 场景&#xff1a; ​ 1互联网搜索&#xff1a;谷歌、百度、各种新闻首页&#xff1b; ​ 2 站内搜索&#xff…

大众汽车合肥社招入职笔试测评SHL题库:综合能力、性格问卷、英语口语真题考什么?

大众汽车合肥社招入职笔试测评包括综合能力测试、性格问卷和英语口语测试。以下是各部分的具体内容&#xff1a; 1. **综合能力测试**&#xff1a; - 这部分测试需要46分钟完成&#xff0c;建议准备计算器和纸笔。 - 测试内容涉及问题解决能力、数值计算能力和逻辑推理能力。 -…