最近做了一个文件下载功能,于是设置了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错误信息,如果获取?的更多相关文章

  1. Ext JS 5 关于Store load返回json错误信息或异常的处理

    关于在store load的时候服务器返回错误信息或服务器出错的处理.ExtJS4应该也能用,没测试过. 这里有两种情况: 服务器返回错误json错误信息,状态为200 服务器异常,状态为500 一. ...

  2. 文件流转换(一般用于axios设置接收文件流设置时responseType: 'blob')

    文件流转换 一般用于axios设置接收文件流设置时responseType: 'blob'当接口报错时,前端因已设置responseType: 'blob'无法再接收json格式数据,会把json格式 ...

  3. 使用spring webflow,在前台页面中如何显示后端返回的错误信息

    刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...

  4. ajax返回json时,js获取类型,是字符串类型

    ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一 ...

  5. axios 利用new FileReader() 下载文件获取返回的错误信息

    this.axios({           method: "post",           url: url,           data: data,           ...

  6. SpringMvc 全局异常处理器定义,友好的返回后端错误信息

    import com.google.common.collect.Maps; import org.apache.log4j.Logger; import org.springframework.be ...

  7. VC2010 _com_error 返回的错误信息

    CString GetComError(const _com_error& e) { CString sMsg; sMsg.Format( _T("HRESULT: 0x%08lx; ...

  8. ASP.net jQuery调用webservice返回json数据的一些问题

    之前寒假时,试着使用jQuery写了几个异步请求demo, 但是那样是使用的webform普通页面,一般应该是用 webservice 居多. 最近写后台管理时,想用异步来实现一些信息的展示和修改, ...

  9. 访问网页时提示的503错误信息在IIS中怎么设置

    访问网页时提示的503错误信息在IIS中怎么设置 503是一种常见的HTTP状态码,出现此提示信息的原因是由于临时的服务器维护或者过载,服务器当前无法处理请求则导致了访问网页时出现了503错误.那么当 ...

随机推荐

  1. axios 请求常用组件,及其错误

    1. var nodeModules = path.join(processPath, 'node_modules') var querystring = require(nodeModules + ...

  2. 关闭mmu和cache

    处理器内部寄存器,访问速度最快,但是数量少 TCM:紧耦合存储器(Cache.主存储器) 辅助存储器(Flash.SD等) Cache是一种容量小但是存取速度非常快的存储器 它保存最近用到的存储器中的 ...

  3. 一、模型验证CoreWebApi 管道方式(非过滤器处理)2(IApplicationBuilder扩展方法的另一种写法)

    一. 自定义中间件类的方式用一个单独类文件进行验证处理 Configure下添加配置 //app.AddAuthorize(); AddAuthorize因为参数(this IApplicationB ...

  4. mariadb主从架构

    mariadb主从架构(异步)和集群 一般应用的场所是网站,主的机器是可以写可以读,从的机器可以读,也可以写,但不会同步.只有主的机器增删改,从的机器才会同步. 主从至少三个线程:dump.I/O t ...

  5. InterlliJ idea文件夹里面无法新建java文件等

    这两天开始实习,因为公司用的InterlliJ idea作为开发工具,所以我这两天也开始学习如何使用这个.所以想将在操作中遇到的问题做笔记发表到上面来.也方便自己随时查阅,也希望能帮助到正在阅读的你! ...

  6. Java学习03-进制学习

    计算机中是以二进制来进行数据传递的,二进制分为二进制.八进制.十进制.十六进制 而他们之间如何进行转换呢,二进制作为元,其他进制都是经二进制进行换算的,所以无论什么进制之间的转换都是先转换为二进制,再 ...

  7. 如何配置SQL Server数据库远程连接

    本地数据库(SQL Server 2012或以上) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1.首先是要打开 数据的配置管理工具 2.配置相关的客户端协议,开启TCP/IP 3.数据库 ...

  8. DevExpress WPF v19.1新版亮点:Scheduler等控件新功能

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...

  9. 数据库管理哪家强?Devart VS Navicat 360°全方位对比解析

    今天小编向大家推荐的是两个开发环节的主流数据库管理品牌,那么你知道这两款数据库管理软件品牌与数据库引擎配套的管理软件有什么区别吗?小编这就360°全方位为您解答: ★ 品牌介绍 Devart:拥有超过 ...

  10. js dom 添加类

    var sheng = document.getElementById("sheng"); ; sheng.onclick = function() { if(this.paren ...