axios下载接口后端返回了json但前端得到的是blob

背景:

        通过axios下载文件,正常情况下后端返回内容blob,前端接收并导出文件。但有时候,后端业务逻辑需要提示错误,于是返回json,但前端预期接收的是blob,所以导出去的文件内容是json字符串。

原因:

        axios请求头配置了响应格式 responseType: 'blob'

const service = axios.create({baseURL: '/'
})
// 导出用户列表
export function exportUserList(data){return request({url: '/admin/accelerate/duration/download',method: 'post',responseType: 'blob', // 指定响应内容为blobdata})
}

解决方法:

        在axios响应拦截器中,判断请求的响应类型。若预期返回blob但实际返回json,则将blob转成json字符串,然后进行错误提示。

// blob转字符串
export const blobTojsonstr = (blob) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (e) => resolve(e.target.result);reader.onerror = (e) => reject(e.target.error);reader.readAsText(blob);});
}
import { Notification } from 'element-ui'// HTTP response 拦截
service.interceptors.response.use(async (res) => {const status = res.statusconst responseType = res.config.responseType // 预期响应数据类型const contentType = res.headers['content-type'] // 真实响应数据类型let resData = null,isBlob = ['arraybuffer', 'blob'].includes(responseType)if (!isBlob) {// 预期是非文件,即jsonresData = res.data} else {// 预期是文件if (contentType.indexOf('application/json') > -1) {// 下载接口异常:Blob转Json后解密isBlob = falsetry {const content = await blobTojsonstr(res.data)resData = JSON.parse(JSON.parse(content).data)} catch (error) {resData = res.data}} else {resData = res.data}}// 不正确的状态码进行统一处理if (!isBlob && (status !== 200 || resData.code !== 0)) {const errMsg = resData.msgNotification.error({title: errMsg})return Promise.reject(new Error(errMsg))}return resData},(error) => {return Promise.reject(new Error(error))}
)

效果:

        正常情况下,后端返回blob,axios接收blob并导出文件。

        异常情况下,后端返回json,axios接收blob后转成json,根据错误码code提示错误。

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

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

相关文章

3MF体积设计扩展

3MF 联盟最近宣布了他们最新的体积设计扩展(volumetric design extension),用于通过基于体积的描述来编码几何形状和空间多样性属性。 该组织致力于推进 3D 打印的通用规范,目前正在新扩展达到 1.0 之前征求公众反馈。 NSDT工具推…

Linux内核驱动开发-001字符设备开发-内核中断驱动独立按键+等待队列优化

1驱动程序 /*************************************************************************> File Name: key_wait.c> Author: yas> Mail: rage_yashotmail.com> Created Time: 2024年04月23日 星期二 13时20分42秒**********************************************…

OpenCV 实现重新映射

返回:OpenCV系列文章目录(持续更新中......) 上一篇:OpenCV 实现霍夫圆变换 下一篇 :OpenCV实现仿射变换 目标 在本教程中,您将学习如何: 一个。使用 OpenCV 函数 cv::remap 实现简单的重新…

thinkphp 各层简介介绍

Controller层负责和视图打交道,Logic层负责处理逻辑,沟通Controller和Model,Model层负责和数据库打交道,Service层负责封装公共服务 controller 工作:接受请求数据,与业务侧logic打交道获取结果数据返回vie…

20240428如何利用IDM下载磁链视频

缘起: https://weibo.com/tv/show/1034:4864336909500449 中国获奖独立纪录片《阿辉》揭秘红灯区“教父”的生存法则 5,751次观看 1年前 发布于 陕西 身为里中横 67.7万粉丝 互联网科技博主 微博原创视频博主 头条文章作者 https://weibo.com/tv/show/1034:4864…

数据通信-A

数据通信 一、数据通信网络基础二、VRP系统三、eNSP配置命令 不是从零开始,有一些基础,主要记录配置命令。一、数据通信网络基础 图标:主要是认识第一行。 常见术语:数据通信网络最基本的功能是实现数据互通。 数据载荷&#…

解决IDEA下springboot项目打包没有主清单属性

1.问题出现在SpringBoot学习中 , 运行maven打包后无法运行 报错为spring_boot01_Demo-0.0.1-SNAPSHOT.jar中没有主清单属性 SpringBoot版本为 2.6.13 Java 版本用的8 解决方法 1.执行clean 删除之前的打包 2.进行打包规范设置 2.1 3.进行问题解决 (借鉴了阿里开发社区) 使用…

[嵌入式系统-53]:嵌入式系统集成开发环境大全

目录 一、嵌入式系统集成开发环境分类 二、由MCU芯片厂家提供的集成开发工具 三、由嵌入式操作提供的集成开发工具 四、由第三方工具厂家提供的集成开发工具 一、嵌入式系统集成开发环境分类 嵌入式系统集成开发工具和集成开发环境可以按照不同的分类方式进行划分&#xff…

【LAMMPS学习】八、基础知识(5.2)粒度模型

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语,以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

将针孔模型相机 应用到3DGS

Motivation 3DGS 的 投影采用的是 CG系的投影矩阵 P P P, 默认相机的 principal point (相机光心) 位于图像的中点处。但是 实际应用的 绝大多数的 相机 并不满足这样一个设定, 因此我们 需要根据 f , c x , c y {f,c_x, c_y} f,cx​,cy​ 这几个参数重新构建3D …

centos 7 yum install -y nagios

centos 7 systemctl disable firewalld --now vi /etc/selinux/config SELINUXdisabled yum install -y epel-release httpd nagios yum install -y httpd nagios systemctl enable httpd --now systemctl enable nagios --now 浏览器 IP/nagios 用户名:…

Anaconda-用conda创建python虚拟环境常用命令

查看安装了哪些包 conda list查看当前存在哪些虚拟环境 conda env list conda info -e检查更新当前conda conda update condaPython创建虚拟环境 conda create -n your_env_name pythonx.xanaconda命令创建python版本为x.x,名字为your_env_name的虚拟环境。you…

Leetcode 第395场周赛 问题和解法

题目 找出与数组相加的整数 I 给你两个长度相等的数组nums1和nums2。 数组nums1中的每个元素都与变量x所表示的整数相加。如果x为负数,则表现为元素值的减少。 在与x相加后,nums1和nums2相等。当两个数组中包含相同的整数,并且这些整数出…

vue学习的预备知识为学好vue打好基础

目录 Vue是什么 ?如何使用Vue ?Vue ApiVue入口apiVue实例apiVue函数api 无构建过程的渐进式增强静态HTMLVue模块化构建工具npmyarnWebpackvue-cliVite Vue是什么 ? 文章基于Vue3叙述。 Vue (发音为 /vjuː/,类似 view) 是一款用于…

探秘STM32内部FLASH的读写操作

探秘STM32内部FLASH的读写操作 在STM32嵌入式系统开发中,内部FLASH是一个重要的存储器,用于存储程序代码和数据。了解如何进行内部FLASH的读写操作对于开发者来说至关重要,可以帮助他们实现数据的存储与更新。本文将深入探讨STM32内部FLASH的…

十大USDT交易平台大全XEX交易所

USDT是一种基于比特币区块链网络的加密代币,主要运用于数字货币交易平台,以稳定币为主。USDT的核心价值在于其与真实货币的固定兑换比率1:1,所以被称为Tether。随着加密货币市场的不断壮大,越来越多的交易平台开始支持USDT&#x…

C#发票查验开发示例、发票识别开发文档

或许有人会问,发票查验与发票识别接口是什么?简单来说,它只是集成在财务系统或APP等应用中的一个功能模块。只需上传发票图片,发票识别接口即可快速提取发票代码、号码、日期、金额、校验码等关键信息,发票查验接口实时…

2024深圳杯(东北三省)数学建模C题完整论文讲解(含完整python代码及所有残骸音爆位置求解结果)

大家好呀,从发布赛题一直到现在,总算完成了2024深圳杯(东北三省数学建模联赛)A题多个火箭残骸的准确定位完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊…

2024最新华为OD机试试题库全 -【孙悟空吃蟠桃】- C卷

1. 🌈题目详情 1.1 ⚠️题目 孙悟空爱吃蟠桃,有一天趁着蟠桃园守卫不在来偷吃。已知蟠桃园有 N 棵桃树,每颗树上都有桃子,守卫将在 H 小时后回来。 孙悟空可以决定他吃蟠桃的速度K(个/小时),每个小时选一颗桃树,并从树上吃掉 K 个,如果树上的桃子少于 K 个,则全部…

【vscode环境配置系列】vscode远程debug配置

VSCODE debug环境配置 插件安装配置文件debug 插件安装 安装C/C, C/C Runner 配置文件 在项目下建立.vscode文件夹,然后分别建立c_cpp_properties.json, launch.json,tasks.json,内容如下: c_cpp_properties.json:…