axios下载接口后端返回了json但前端得到的是blob

背景:

通过axios下载文件,正常情况下后端返回内容blob,前端接收并导出文件。但有时候,后端业务逻辑需要提示错误,于是返回json,但前端预期接收的是blob,所以导出去的文件内容是json字符串。

原因:

axios请求头配置了响应格式 responseType: 'blob'

javascript 复制代码
const service = axios.create({
    baseURL: '/'
})
javascript 复制代码
// 导出用户列表
export function exportUserList(data){
  return request({
    url: '/admin/accelerate/duration/download',
    method: 'post',
    responseType: 'blob', // 指定响应内容为blob
    data
  })
}

解决方法:

在axios响应拦截器中,判断请求的响应类型。若预期返回blob但实际返回json,则将blob转成json字符串,然后进行错误提示。

javascript 复制代码
// blob转字符串
export const blobTojsonstr = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(e.target.error);
    reader.readAsText(blob);
  });
}
javascript 复制代码
import { Notification } from 'element-ui'

// HTTP response 拦截
service.interceptors.response.use(
  async (res) => {
    const status = res.status
    const responseType = res.config.responseType // 预期响应数据类型
    const contentType = res.headers['content-type'] // 真实响应数据类型

    let resData = null,
      isBlob = ['arraybuffer', 'blob'].includes(responseType)
    if (!isBlob) {
      // 预期是非文件,即json
      resData = res.data
    } else {
      // 预期是文件
      if (contentType.indexOf('application/json') > -1) {
        // 下载接口异常:Blob转Json后解密
        isBlob = false
        try {
          const content = await blobTojsonstr(res.data)
          resData = JSON.parse(JSON.parse(content).data)
        } catch (error) {
          resData = res.data
        }
      } else {
        resData = res.data
      }
    }

    // 不正确的状态码进行统一处理
    if (!isBlob && (status !== 200 || resData.code !== 0)) {
      const errMsg = resData.msg
      Notification.error({
        title: errMsg
      })

      return Promise.reject(new Error(errMsg))
    }

    return resData
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)

效果:

正常情况下,后端返回blob,axios接收blob并导出文件。

异常情况下,后端返回json,axios接收blob后转成json,根据错误码code提示错误。

相关推荐
小磊哥er3 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤17 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶25 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室4 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子5 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存