接口返回 blob 格式怎么转成 json

news2024/11/15 15:58:53

问题

工作中遇到一个接口逻辑是有时候会返回文件有时候会返回json,为了保证能接收到文件,需要将 responseType 设置为 blob。但是如果此时需要根据返回的是文件还是json来进行后续不同的操作,你在控制台输出返回的结果,会发现输出的都是blob文件,此时有没有办法转成json呢?

方案

在控制台输出一下返回为文件和返回为json的结果:
在这里插入图片描述
在这里插入图片描述
可以看出两者的type是不同的,而且输出 result.type 也可以获取到 application/jsontext/xml。因此我们可以通过这个type来进行是否转换为json的判断条件。

代码示例

api(param).then(result => {
  if (result.type === 'application/json') {
    const reader = new FileReader() // 创建FileReader实例
    reader.readAsText(result, 'utf-8') // 读取文件, 用字符串显示
    reader.onload = () => {
      console.log(JSON.parse(reader.result)) // string 转 json
    }
  }
})

结果

在这里插入图片描述

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

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

相关文章

SpringBoot第16讲:如何生成接口文档之Swagger技术栈

SpringBoot第16讲:如何生成接口文档之Swagger技术栈 SpringBoot开发Restful接口,有什么API规范吗?如何快速生成API文档呢?Swagger 是一个用于生成、描述和调用 RESTful 接口的 Web 服务。通俗的来讲,Swagger 就是将项目…

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法

FANUC机器人SRVO-300机械手断裂故障报警原因分析及处理办法 首先,我们查看报警说明书上的介绍: 总结:即在机械手断裂设置为无效时,机器人检测出了机械手断裂信号(不该有的信号,现在检测到了,所以报警) 使机械手断裂设定为无效/有效的具体方法:  按下示教器的MENU菜单…

springboot()—— swagger

零、一张图读懂swagger 懂了,这玩意就是用swagger搞出来的! 就是一个后端开发自测的东西嘛! 一、概念 存在即合理,我们看一下swagger诞生的原因:在前后端分离的架构中,前端新增一个字段,后端就…

【Java数据结构】第七章 —— 栈

目录 一、栈 二、栈的主要方法 三、栈的模拟实现 3.1 构造方法和成员属性 3.2 push 方法 3.3 pop 方法 3.4 peek 方法 3.5 size 方法 一、栈 <

工程监测仪器多通道振弦数据记录仪的MODBUS通讯协议解析

工程监测仪器多通道振弦数据记录仪的MODBUS通讯协议解析 多通道振弦数据记录仪是多通道振弦、温度信号采集记录仪&#xff0c; 具备 32 通道传感器接口&#xff0c; 可对最多16 通道振弦频率和 16 通道温度、 32 通道振弦频率进行实时或全自动定时采集记录&#xff08;支持内部…

【C++奇遇记】函数探幽(上)

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 数据库专栏 初阶数据结构 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如…

操作系统 - 小记 230803

文章目录 计算机的硬件组成程序的存储和执行程序语言的设计和进化存储设备的层次结构操作系统 https://www.bilibili.com/video/BV1Q5411w7z5?p2 计算机的硬件组成 CPU CU&#xff0c;控制单元ALU&#xff0c;算数逻辑单元寄存器 IO Bridge 处理器和外部交互的桥梁Main Memory…

redis原理 4:雷厉风行 —— 管道

大多数同学一直以来对 Redis 管道有一个误解&#xff0c;他们以为这是 Redis 服务器提供的一种特别的技术&#xff0c;有了这种技术就可以加速 Redis 的存取效率。但是实际上 Redis 管道 (Pipeline) 本身并不是 Redis 服务器直接提供的技术&#xff0c;这个技术本质上是由客户端…

【LeetCode-简单】剑指 Offer 22. 链表中倒数第k个节点(详解)

题目 输入一个链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&#xff0c;即链表的尾节点是倒数第1个节点。 例如&#xff0c;一个链表有 6 个节点&#xff0c;从头节点开始&#xff0c;它们的值依次是 1、2、3、4、5、6。这…

2024年杭电MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段&#xff0c;不少考生开始持续将注意力集中在备考的规划中&#xff01;杭州达立易考教育整合浙江省内的MBA项目信息&#xff0c;为大家详细梳理了相关报考参考内容&#xff0c;方便大家更好完成择校以及针对性的备考工作。本期…

差异对比犀利手册:使用 Partial Diff 插件在 VSCode 中比较代码差异

简介&#xff1a; 在本教程中&#xff0c;我们将介绍如何在 Visual Studio Code&#xff08;VSCode&#xff09;编辑器中安装和使用 Partial Diff 插件来进行源代码文件的差异比较。Partial Diff 插件是一个强大且简单的工具&#xff0c;可以帮助你更容易地查看和理解代码的变…

14.2.2 【Linux】software, hardware RAID

磁盘阵列分为硬件与软件。所谓的硬件磁盘阵列是通过磁盘阵列卡来达成阵列的目的。磁盘阵列卡上面有一块专门的芯片在处理 RAID 的任务&#xff0c;因此在性能方面会比较好。在很多任务 &#xff08;例如 RAID 5 的同位检查码计算&#xff09; 磁盘阵列并不会重复消耗原本系统的…

“已停止访问该网页“ 解决流程,微信外部链接内容管理规范

登录手机管家官网 腾讯安全-网址安全中心 自行处理。 说明&#xff1a; 一直以来&#xff0c;微信致力于为用户提供绿色、健康的网络生态环境。 根据法律法规的规定&#xff0c;微信将落实“以安全为底线”的互联互通&#xff0c;为确保高质量的平台内容和良好的用户体验&a…

Multimodal Learning with Transformer: A Survey

Transformer多模态学习 Abstract1 INTRODUCTION2 BACKGROUND2.1 Multimodal Learning (MML)2.2 Transformers: a Brief History and Milestones2.3 Multimodal Big Data 3 TRANSFORMERS: A GEOMETRICALLY TOPOLOGICAL PERSPECTIVE3.1 Vanilla Transformer3.1.1 Input Tokenizat…

使用手机相机检测电脑屏幕刷新率Hz

使用手机相机检测电脑屏幕刷新率Hz 1、电脑打开https://www.testufo.com/frameskipping 2、相机专业模式&#xff1a;快门1/10、ISO自动&#xff0c;拍摄一张照片。120Hz至少要有12个亮块&#xff0c;50Hz至少有6个亮块。 更改刷新速率 1、选择 “开始>设置>系统>显示…

ARM64 常见汇编指令学习 10 -- 无符号位域提取指令 BFXIL

文章目录 BFXIL使用例子 BFXIL 有2种语法&#xff1a; BFXIL Wd, Wn, #lsb, #width ; 32-bit BFXIL Xd, Xn, #lsb, #width ; 64-bit从Wn 寄存器的第 lsb 位开始&#xff0c;提取 width 位&#xff0c;替换 Wd 寄存器的最低 width位&#xff0c;剩余高位不改变。 使用例子 假…

科技云报道:向量数据库:AI时代的下一个热点

科技云报道原创。 最近&#xff0c;又一个概念火了——向量数据库。 随着大模型带来的应用需求提升&#xff0c;4月以来多家海外知名向量数据库创业企业传出融资喜讯。 4月28日&#xff0c;向量数据库平台Pinecone宣布获得1亿美元&#xff08;约7亿元&#xff09;B轮融资&am…

DBeaver连MySQL库报错public key retrieval is not allowed

连接报错: public key retrieval is not allowed解决办法&#xff1a; 右击你连接的库进行编辑连接&#xff08;或者直接按F4打开编辑&#xff09; 然后点击驱动属性里面进行设置 找到allowPublicKeyRetrieval属性&#xff0c;把值由false改为true 注&#xff1a;连接成功后如…

Flutter 混合架构方案探索

得益于 Flutter 优秀的跨平台表现&#xff0c;混合开发在如今的 App 中随处可见&#xff0c;如最近微信公布的小程序新渲染引擎 Skyline 发布正式版也在底层渲染上使用了 Flutter&#xff0c;号称渲染速度提升50%。 在现有的原生 App 中引入 Flutter 来开发不是一件简单的事&a…

Kubernetes高可用集群二进制部署(四)部署kubectl和kube-controller-manager、kube-scheduler

Kubernetes概述 使用kubeadm快速部署一个k8s集群 Kubernetes高可用集群二进制部署&#xff08;一&#xff09;主机准备和负载均衡器安装 Kubernetes高可用集群二进制部署&#xff08;二&#xff09;ETCD集群部署 Kubernetes高可用集群二进制部署&#xff08;三&#xff09;部署…