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

}

......

})

完工!

相关推荐
majingming1236 小时前
FUNCTION
java·前端·javascript
A_nanda6 小时前
Vue项目升级
前端·vue3·vue2
SuperEugene7 小时前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
abigale037 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
子兮曰7 小时前
Bun v1.3.11 官方更新全整理:新增功能、关键修复与升级验证
javascript·node.js·bun
Setsuna_F_Seiei7 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑8 小时前
追踪来自Agent的Web 流量
前端
wefly20178 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年9 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
英俊潇洒美少年9 小时前
ref 底层到底是怎么变成响应式的?
vue.js