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

28 篇文章 0 订阅
20 篇文章 0 订阅

项目中难免会遇到预览文件或者下载文件的场景,如果后台返回的是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);
    });

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

  • 11
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值