axios设置responseType: ‘blob‘,获取接口返回的错误信息

在axios的请求中当后端接口返回的是文件流的情况下,我们需要在请求参数里面设置responseType: 'blob',如果接口报错,默认前端无法获取后端返回的错误信息。
解决方法:通过FileReader获取错误信息

js 复制代码
    async handleFetch() {
      const res =
        await idleApi.toSign({
          file: 'pdf',
        });
      console.log(res)
      // 错误处理
      if(!res.headers['content-disposition']) {
        const fileReader = new FileReader()
        fileReader.readAsText(new Blob([res.data], { type: 'application/octet-stream' }), 'utf-8')
        fileReader.onload = () => {
          const msg = JSON.parse(fileReader.result)
          console.log(msg?.sys_header?.message) // 错误提示信息,根据接口返回内容不同
        } 
      }
    }
  1. 接口正确返回文件流,打印出来的res

network中返回的是文件流数据

  1. 接口报错的情况,打印出来的res

    实际network中的内容
相关推荐
BD_Marathon4 分钟前
Vue3_插值表达式
javascript
梦想是准点下班4 分钟前
【vue3】 + 【vite】 + 【vite-plugin-obfuscator】混淆打包 => 放弃了,样式会丢
前端·vue.js
前端达人6 分钟前
原生JavaScript vs 前端框架,2026年该怎么选?
开发语言·前端·javascript·前端框架·ecmascript
漫天黄叶远飞7 分钟前
React 组件通讯全攻略:拒绝 "Props" 焦虑,掌握数据流动的艺术
前端·react.js·前端框架
梦想是准点下班7 分钟前
【vue3】 + 【vite】 + 【rollup-plugin-obfuscator】混淆打包 => 打包报错
前端·vue.js
恋猫de小郭8 分钟前
Flutter UI 设计库解耦重构进度,官方解答未来如何适配
android·前端·flutter
星_离11 分钟前
高德地图-物流路线
前端·vue.js
细心细心再细心11 分钟前
Lexical 富文本编辑器组件详解
前端
qq_4061761412 分钟前
JavaScript中的循环
前端
小皮虾14 分钟前
搞全栈还在纠结 POST、GET、RESTful?试试这个,像调用本地函数一样写接口
前端·node.js·全栈