axios请求类型是文件流怎么显示报错信息

axios请求类型是文件流,但是报错信息的话没法显示,在request.js文件中更改一下request拦截器代码:

service.interceptors.request.use(config => {

......

, error => {

console.log(error, '报错报错')

// 处理请求错误

if (error.response && error.response.data instanceof Blob && error.response.data.type === 'application/json') {

// 如果错误信息是一个 JSON 格式的 Blob,那么读取 Blob 的内容并解析为 JSON 对象

return error.response.data.text().then(text => {

const json = JSON.parse(text);

console.log(json);

// 返回一个包含错误信息的 Promise 对象

return Promise.reject(json);

});

}

// 如果错误信息不是一个 JSON 格式的 Blob,那么返回原始的错误对象

return Promise.reject(error);

// Promise.reject(error)

})

更改响应拦截器:

service.interceptors.response.use(res => {

if (res.data) {

// 判断Bolb类型是否有错误信息 错误信息的话直接弹窗提示

if (

res.data instanceof Blob &&

res.data.type === 'application/json'

) {

let reader = new FileReader()

reader.readAsText(res.data, 'utf-8')

reader.onload = function (e) {

let data = JSON.parse(e.target.result)

if (data.code !== 200) {

MessageBox.confirm(data.data, '文件生成失败', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'error'

}).then(() => {

})

}

}

return Promise.resolve(res)

}

}

// 二进制数据则直接返回

if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {

return res.data

}

......

})

完工!

相关推荐
布列瑟农的星空12 分钟前
重学React——memo能防止Context的额外渲染吗
前端
FuckPatience12 分钟前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
小小前端_我自坚强18 分钟前
前端踩坑指南 - 避免这些常见陷阱
前端·程序员·代码规范
lichenyang45319 分钟前
从零实现JSON与图片文件上传功能
前端
WebGirl22 分钟前
动态生成多层表头表格算法
前端·javascript
hywel1 小时前
一开始只是想整理下书签,结果做成了一个 AI 插件 😂
前端
傅里叶1 小时前
SchedulerBinding 的三个Frame回调
前端·flutter
小小前端_我自坚强1 小时前
React Hooks 使用详解
前端·react.js·redux
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
aklry1 小时前
elpis之学习总结
前端·vue.js