前端vue

axios blob 返回json特殊情况处理

2022-01-12  本文已影响0人  Jabo

前言

   今天业务提出了一个需求,导出要做次数限制,这个我先简单啊,后端接口改一下又限制的时候返回一个JSON对象包含Code和Msg,前端全局拦截一下就ok了,那就开干吧。后端接口调整好了,前端配置也好了,but前端没拦截到,尴尬了。开始排除吧,先把正常拦截的response打印出。


正常拦截的response
正常blob接口preview

下面是特殊情况返回JSON

特殊情况拦截的response
特殊情况blob接口preview

非blob格式的response


非blob格式的response

   自此我们发现responseType: 'blob', 返回的data都是Blob格式,而且特殊情况(即返回JSON)他的Blob 对象的type:"application/json"。所有我们的思路是先判断是不是blob格式,然后判断是不是特殊情况(json),在把blob格式转成json对象,上代码

if (Object.prototype.toString.call(response.data) === '[object Blob]') {  // 先判断是不是blob格式
      if (response.data.type.includes('application/json')) {  // 判断是不是特殊情况(json)
        let reader = new FileReader()
        reader.onload = function () {
          let res = reader.result
          let result = JSON.parse(res) // blob格式转成json
          if (result.Code === 431) { // 导出超出限制
             // 对应业务逻辑
          }
        }
        reader.readAsText(response.data)
      }
    }

总结

   如果帮助到你请给个赞哈,请copy党手下留德,标明来源,原创整理不易。

上一篇 下一篇

猜你喜欢

热点阅读