导出文件,responseType设置了blob,实际返回了JSON格式的错误信息的处理方式
需求:导出文件
问题描述:由于后台直接返回的文件流,在请求下载的方法中将XHR 的 responseType 指定为 blob 或者 arraybuffer。但并不是每次的操作都是成功的,所以在接口错误时后台返回的就是不是二进制流格式了。因此这里需要获取到后台反馈的错误信息进行用户提示。
这时后台返回的数据类型就是这样的:

而接口返回的是json的数据信息{“msg”: "导出失败", code: 1007}
解决代码示例:
getFiles(_path, query) {
axios({
method: 'get', // 请求方式
headers: {
'Content-Type': 'application/octet-stream',
'token': store.getters.token
},
url: _path, // 请求路径
params: query,
responseType: 'blob'
}).then(res => {
const data = res.data;
if (res.data.type == 'application/json') {
// json信息展示
this.handlerResponseError(data);
} else {
// 下载文件流
const filename = this.getCaption(res.headers['content-disposition']);
const blob = new Blob([res.data], {
type: 'application/octet-stream'
});
const objectUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectUrl;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();// 点击
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(URL); // 释放掉blob对象
}
}).catch((err) => {
console.log(err, 'err');
});
},
handlerResponseError(data) {
const _this = this;
const fileReader = new FileReader();
fileReader.onload = function() {
try {
const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据,后台转换失败
console.log('后台返回的信息',jsonData.msg);
// dosomething……
} catch (err) { // 解析成对象失败,说明是正常的文件流
console.log('success...');
}
};
fileReader.readAsText(data);
},
PS:MDN官方解释:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据(https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)。
导出文件,responseType设置了blob,实际返回了JSON格式的错误信息的处理方式的更多相关文章
- 接口返回数据Json格式处理
有这样一个页面 , 用来显示用户的账户记录数据,并且需要显示每个月的 收入 支出合计 ,在分页的时候涉及到一些问题,需要对返回的Json格式做处理,处理起来比较麻烦,后端返回的Json数据格式形式如下 ...
- JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
JavaBean组件 JavaBean组件实际是一种java类.通过封装属性和方法成为具有某种功能或者处理某个业务的对象. 特点:1.实现代码的重复利用.2.容易编写和维护.3.jsp页面调用方便. ...
- $.ajax返回的JSON格式的数据后无法执行success的解决方法
近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...
- javascript解析从服务器返回的json格式数据
在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...
- shell脚本中sqlite3命令查询数据库失败返回空,并将错误信息打印到标准错误输出
shell脚本中sqlite3命令查询数据库失败返回空,并将错误信息打印到标准错误输出 如: #/bin/sh local ret='sqlite3 test.db "select test ...
- 在C#中通过使用Newtonsoft.Json库来解析百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据
百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据,如下所示: http://api.map.baidu.com/geocoding/v3/?address=**省**市**区**路 ...
- Python自动化之ajax返回表单验证的错误信息和序列化扩展
form内置序列化错误 如果使用form提交数据的时候,可以直接返回错误信息到模板里面进行渲染 但是如果使用ajax处理呢 from django import forms from django.f ...
- MVC4中视图获取控制器中返回的json格式数据
再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...
- 在thinkphp5.0中调用ajax时, 返回的JSON 格式数据在html前台不能用时
在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...
随机推荐
- echart关系图平分节点删除时自动平衡问题
项目场景: 项目场景:Echarts关系图中(不是力图)一个节点x,y是固定的,为了同一列能居中显示,规定:当前列有奇数个元素新节点往下放,有偶数个节点时新节点往上放. 问题描述: 删除中间节点会有空 ...
- ACM-ICPC 2018 徐州赛区网络预赛 B BE, GE or NE 【模拟+博弈】
题目:戳这里 题意:A和B博弈,三种操作分别是x:加a,y:减b,z:取相反数.当x或y或z为0,说明该操作不可取,数据保证至少有一个操作可取,给定一个区间(l,k)和原始数字m,如果A和B在n次操作 ...
- URAL 1132 Square Root(二次剩余定理)题解
题意: 求\(x^2 \equiv a \mod p\) 的所有整数解 思路: 二次剩余定理求解. 参考: 二次剩余Cipolla's algorithm学习笔记 板子: //二次剩余,p是奇质数 l ...
- 手工数据结构系列-C语言模拟队列和栈 hdu1702
#include <stdio.h> #include <stdlib.h> //================= DATA STRUCTURE ============== ...
- 【DP】区间DP入门
在开始之前我要感谢y总,是他精彩的讲解才让我对区间DP有较深的认识. 简介 一般是线性结构上的对区间进行求解最值,计数的动态规划.大致思路是枚举断点,然后对断点两边求取最优解,然后进行合并从而得解. ...
- js 十大排序算法 All In One
js 十大排序算法 All In One 快速排序 归并排序 选择排序 插入排序 冒泡排序 希尔排序 桶排序 堆排序(二叉树排序) 基数排序 计数排序 堆排序(二叉树排序) https://www.c ...
- PerformanceObserver API All In One
PerformanceObserver API All In One 性能监控 https://developer.mozilla.org/en-US/docs/Web/API/Performance ...
- leetcode bug & 9. Palindrome Number
leetcode bug & 9. Palindrome Number bug shit bug "use strict"; /** * * @author xgqfrms ...
- axios upload excel file
axios upload excel file https://github.com/axios/axios/issues/1660 https://stackoverflow.com/questio ...
- Flutter: The getter 'futureDynamicType' was called on null.
> flutter packages pub upgrade