文件预览或下载中,axios设置responseType:blob时对于后台报错信息的捕获兼容

项目中难免会遇到预览文件或者下载文件的场景,如果后台返回的是base64或者图片格式还好说,文件信息直接放在返回body里,作为对象属性给到前端,很直观,也方便取用。

但后台给到的是文件流就要麻烦一些了,一般来说文件流会直接凡在res.data里

处理这种特殊返回值时需要设置axios的responseType为blob,防止axios内部默认处理返回值,导致无法解析:

axios.get({
    url: 'xxxxxx',
    method: 'get',
    data:{},
    responseType: 'blob'
}).then(res => {
       console.log(res);
    });

当后台解析错误的时候,返回的就是正常的错误对象,包含错误码和错误信息,如果不做处理,那么错误状态和成功状态都是blob类型,无法捕获

但实际上错误状态是这样的形式:

所以需要对返回值做特殊处理,尝试把blob转换为json格式,如果转换成功则说明返回的数据不是文档流,后台出错,反之则文档转换正常,继续下载或预览:

axios.get({
    url: 'xxxxxx',
    method: 'get',
    data:{},
    responseType: 'blob'
}).then(res => {
       let data = res.data;
        let fileReader = new FileReader();
        fileReader.onload = function() {
           try {
                 let jsonData = JSON.parse(this.result);
                 if (jsonData.code) {
                 // 说明是普通对象数据,后台转换失败
                 // to do something
                 alert('not ok');
                 }
               } catch (err) {
                 // 解析成对象失败,说明是正常的文件流
                 alert('ok');
               }
        };
        fileReader.readAsText(data);
    });

这样就可以判断返回的文件流是否是正常的了,做出合适的提示

发布了59 篇原创文章 · 获赞 29 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/dongguan_123/article/details/100183284
今日推荐