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

}

......

})

完工!

相关推荐
花生Peadar7 分钟前
AI编程从入门到精通
前端·后端·代码规范
bug爱好者8 分钟前
vue3.x 使用vue3-tree-org实现组织架构图 + 自定义模版内容 - 附完整示例
前端·javascript·vue.js
flashlight_hi15 分钟前
LeetCode 分类刷题:1669. 合并两个链表
javascript·leetcode·链表
达达尼昂18 分钟前
🎯 Flutter 拖拽选择组件:flutter_drag_selector —— 像选文件一样选择列表项
前端·flutter
Keely4028537 分钟前
Claude 配置使用墨刀MCP(modao-proto-mcp)
前端·aigc·claude
少卿42 分钟前
从零构建 React Native 导航体系-React Navigation
前端·react native
Wect43 分钟前
学习React-DnD:实现 TodoList 简单拖拽功能
前端·react.js
前端小书生44 分钟前
Google Map、Solar Api
前端·react.js·google
毕设十刻1 小时前
基于Vue的售票系统开发3g480(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
行走的陀螺仪1 小时前
前端CI/CD 流程
前端·ci/cd·工程化·自动化构建