处理文件下载失败，如何将Blob对象转换为Json？

Question

【描述】：
axios在处理文件下载时设置了responseType：blob，期望下载失败时在前端报后端返回的错误，
但此时后端返回的错误信息Json已经被转为blob对象，请问如何将blob对象转回原来的Json呢？

或者说怎么处理拦截，因为blob对象时axios拦截器无法判断该进then还是catch。
而后端返回非200的错误状态码时又不会返回Json对象解析

【相关代码】

// axios配置
export function exportResult(params) {
  return noRejectRequest({
    url: ...,
    method: ...,
    responseType: 'blob', // 转换为Blob对象而不是DOMString
    params
  })
}
// api请求
exportResult({...})
.then(res => {
     ...  // 成功处理
})
.catch(err => {
     ...  // 失败处理,此时后端会返回Json格式错误
})

【相似问题】
axios 的responseType 类型动态设置 - Celia的回答 - SegmentFault 思否
https://segmentfault.com/q/10...

Answer 1

一楼和二楼的方法是正确的，但是我必须加上判断 if (res.data.type === 'application/json') {……}，才能够执行。在这里提醒一下诸位

Answer 2

也可以设置responseType为arraybuffer，然后判断成功失败来决定怎么解析返回的arraybuffer

Answer 3

// 如果服务器错误返回
if (result.data.type === 'application/json') {
    let reader = new FileReader();
    reader.readAsText(result.data, 'utf-8');
    reader.onload = (e) => {
        console.log("----",JSON.parse(reader.result));
        console.log("----",JSON.parse(e.target.result));
    }
    reader.onload = function (e) {
        console.log("====",JSON.parse(reader.result));
        console.log("====",JSON.parse(e.target.result));
    }
}

Answer 4

//可以现根据blob的type来判断是否是json还是stream，如果是streamname就去下载，如果是jsonname用fileReader解析blob

var reader = new FileReader();
reader.addEventListener("loadend", function() {
    console.log(JSON.parse(reader.result));
});
reader.readAsText(blob,['utf-8']);

Answer 5

使用FileReader

var reader = new FileReader()
reader.onload = e => console.log(JSON.parse(e.target.result))
reader.readAsText(blob)