最近做了一个文件下载功能,于是设置了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. Java学习03-进制学习

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

  2. urllib urllib2学习笔记

    Python的urllib和urllib2模块都做与请求URL相关的操作,但他们提供不同的功能.他们两个最显着的差异如下: urllib2可以接受一个Request对象,并以此可以来设置一个URL的h ...

  3. java医院交费机

    1.读卡器 钱币识别器 身份证识别等 2.与银行交互 socket客户端 发送 10001 返回解析 查询余额 密码发送 3.界面展示freemaker ftl文件展示 4.hql语句 5.webse ...

  4. 校内题目T2695 桶哥的问题——吃桶

    同T2一样外校蒟蒻可能没看过: 题目描述: 题目背景 @桶哥 桶哥的桶没有送完. 题目描述 桶哥的桶没有送完,他还有n个桶.他决定把这些桶吃掉.他的每一个桶两个属性:种类aia_iai​和美味值bib ...

  5. CentOS 7添加开机启动服务脚本

    一.添加开机自启服务 在CentOS 7中添加开机自启服务非常方便,只需要两条命令(以Jenkins为例): systemctl enable jenkins.service #设置jenkins服务 ...

  6. 【30分钟学完】canvas动画|游戏基础(extra1-1):美图我也行

    前言 本文是接续系列教程的extra1,主要是介绍颜色系统在canvas中的应用. 本来是与extra1一起成文的,因为segmentfault莫名其妙的字数限制bug只能分割放送了. canvas操 ...

  7. Eclipse/MyEclipse超全常用快捷键汇总,绝对实用

    [MyEclipse CI 2019.4.0安装包下载] Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 常用快捷 ...

  8. Linux 软件的下载安装

    一.Linux系统安装软件的方式有两种: 1.通过 Linux 资源服务(类似于APP Shop)直接安装 2.下载tar包,解压安装.   二.Linux 资源服务安装软件 1.提示:一般安装一个软 ...

  9. Redis数据类型之散列表

    Redis五大数据类型以及操作 目录: 一.redis的两种链接方式 二.redis的字符串操作(string) 三.redis的列表操作(list) 四.redis的散列表操作(类似于字典里面嵌套字 ...

  10. HDU-4292-Food(最大流,Dinic)

    链接: https://vjudge.net/problem/HDU-4292 题意: You, a part-time dining service worker in your college's ...