设置了responseType:Blob之后,如果返回json错误信息,如果获取?
最近做了一个文件下载功能,于是设置了responseType: Blob的方式, 什么是Blob呢,MDN官方解释:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据(https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)。
axios请求如下:
axios.get({
url: 'xxxxxx',
method: 'get',
data:{},
responseType: 'blob'
}).then(res => {
downLoadBlobFile(res.data, fileName, mimeType); //该方法后面会给出
});
这样子我就能正常的下载文件了,但是测试了几个数据之后,发现有的文件下载之后打不开,如图:
查看接口,原来接口确实返回了正常的错误对象,包含错误码和错误信息,但是因为是blob数据类型,无法捕获,所以还是被当成文件下载下来了.
API返回:

js尝试获取返回的数据:

获取到的是Blob数据流,我们需要将其转化成json格式才行,方法如下:
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = function() {
try {
let jsonData = JSON.parse(this.result); // 说明是普通对象数据,后台转换失败
if (jsonData.code) {
alert('fail...');
}
} catch (err) { // 解析成对象失败,说明是正常的文件流
alert('success...');
downLoadBlobFile(res.data, fileName, mimeType);
}
};
fileReader.readAsText(data)
酱紫就可以获取到正常的json数据了,你想干嘛就干嘛啦~
附 downLoadBlobFile方法:
export const downLoadBlobFile = (data: Blob, fileName?: string, type?: string) => { //type为Mime类型
let name = fileName || new Date().toLocaleDateString();
let typeStr = type ? type : 'application/vnd.ms-excel';
if (window.navigator.msSaveOrOpenBlob) { //兼容性处理
const blob = new Blob([data], { type: typeStr });
navigator.msSaveBlob(blob, name);
} else {
const excelBlob = new Blob([data], { type: typeStr });
let oa = document.createElement('a');
oa.href = URL.createObjectURL(excelBlob);
oa.download = name;
document.body.appendChild(oa);
oa.click();
}
};
注意,参数type为MIME类型,常见文档类型的MIME可参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
参考文档:https://blog.csdn.net/dongguan_123/article/details/100183284
设置了responseType:Blob之后,如果返回json错误信息,如果获取?的更多相关文章
- Ext JS 5 关于Store load返回json错误信息或异常的处理
关于在store load的时候服务器返回错误信息或服务器出错的处理.ExtJS4应该也能用,没测试过. 这里有两种情况: 服务器返回错误json错误信息,状态为200 服务器异常,状态为500 一. ...
- 文件流转换(一般用于axios设置接收文件流设置时responseType: 'blob')
文件流转换 一般用于axios设置接收文件流设置时responseType: 'blob'当接口报错时,前端因已设置responseType: 'blob'无法再接收json格式数据,会把json格式 ...
- 使用spring webflow,在前台页面中如何显示后端返回的错误信息
刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...
- ajax返回json时,js获取类型,是字符串类型
ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一 ...
- axios 利用new FileReader() 下载文件获取返回的错误信息
this.axios({ method: "post", url: url, data: data, ...
- SpringMvc 全局异常处理器定义,友好的返回后端错误信息
import com.google.common.collect.Maps; import org.apache.log4j.Logger; import org.springframework.be ...
- VC2010 _com_error 返回的错误信息
CString GetComError(const _com_error& e) { CString sMsg; sMsg.Format( _T("HRESULT: 0x%08lx; ...
- ASP.net jQuery调用webservice返回json数据的一些问题
之前寒假时,试着使用jQuery写了几个异步请求demo, 但是那样是使用的webform普通页面,一般应该是用 webservice 居多. 最近写后台管理时,想用异步来实现一些信息的展示和修改, ...
- 访问网页时提示的503错误信息在IIS中怎么设置
访问网页时提示的503错误信息在IIS中怎么设置 503是一种常见的HTTP状态码,出现此提示信息的原因是由于临时的服务器维护或者过载,服务器当前无法处理请求则导致了访问网页时出现了503错误.那么当 ...
随机推荐
- C语言:标准IO_fopen( )、fclose() ①
思前想后一个月,我终于敲下了我的第一篇开山之作. 博客千千万,我的博客首先记录的是学习时候的理解,用于给自己翻阅查找,现在主要研究的是C语言和STM32.如果能帮到你,那是最好的,假如我写的东西有错误 ...
- 树上独立集数量 树型DP
题目描述: 对于一棵树,独立集是指两两互不相邻的节点构成的集合.例如,图1有5个不同的独立集(1个双点集合.3个单点集合.1个空集),图2有14个不同的独立集,图3有5536个不同的独立集. 输入: ...
- 第04课:GDB常用命令详解(上)
本课的核心内容如下: run命令 continue命令 break命令 backtrace与frame命令 info break.enable.disable和delete命令 list命令 prin ...
- json格式字符串转字典
//json格式字符串转字典+ (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString { if (jsonStr ...
- ESP8266-Station模式--我想连上谁
Station模式又叫做站点工作模式,类似于无线终端 处于Station模式下的ESP8266,可以连接到AP.通过Station(简称为“STA”)模式,ESP8266作为客户端连接到路由的wifi ...
- 数据库基本概念及Oracle基本语句
一.数据库分类 通常是按照数据模型的特点将传统数据库系统分成网状数据库.层次数据库和关系数据库三种. 1.网状数据库 顾名思义,网状数据库采用的是以记录类型为结点的网状数据模型,是一种导航式(Navi ...
- 【NOIP2016提高A组模拟8.17】(雅礼联考day1)Binary
题目 分析 首先每个数对\(2^i\)取模.也就是把每个数的第i位以后删去. 把它们放进树状数组里面. 那么当查询操作, 答案就位于区间\([2^i-x,2^{i-1}-1-x]\)中,直接查询就可以 ...
- vue 设置 input 为不可以编辑
我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点"编辑"时,显示可以编辑的那个input <div class= ...
- Git远程新建分支之后,本地看不到最新分支
git remote update origin –prune 注意 双- csdn 对于 两个 - 看起来像一个
- Linux培训教程 浅谈:PHP在linux上执行外部命令(整理)
一.PHP中调用外部命令介绍 二.关于安全问题 三.关于超时问题 四.关于PHP运行linux环境中命令出现的问题 一.PHP中调用外部命令介绍 在PHP中调用外部命令,可以用,1>调用专门函数 ...
