导出文件，responseType设置了blob，实际返回了JSON格式的错误信息的处理方式

需求：导出文件

问题描述：由于后台直接返回的文件流，在请求下载的方法中将XHR 的 responseType 指定为 blob 或者 arraybuffer。但并不是每次的操作都是成功的，所以在接口错误时后台返回的就是不是二进制流格式了。因此这里需要获取到后台反馈的错误信息进行用户提示。

这时后台返回的数据类型就是这样的：

而接口返回的是json的数据信息{“msg”: "导出失败"， code: 1007}

解决代码示例：

getFiles(_path, query) {

    axios({

      method: 'get', // 请求方式

      headers: {

        'Content-Type': 'application/octet-stream',

        'token': store.getters.token

      },

      url: _path, // 请求路径

      params: query,

      responseType: 'blob'

    }).then(res => {

      const data = res.data;

      if (res.data.type == 'application/json') {
　　　　　// json信息展示

        this.handlerResponseError(data);

      } else {

        // 下载文件流

        const filename = this.getCaption(res.headers['content-disposition']);

        const blob = new Blob([res.data], {

          type: 'application/octet-stream'

        });

        const objectUrl = URL.createObjectURL(blob);

        const link = document.createElement('a');

        link.href = objectUrl;

        link.setAttribute('download', filename);

        document.body.appendChild(link);

        link.click();// 点击

        document.body.removeChild(link); // 下载完成移除元素

        window.URL.revokeObjectURL(URL); // 释放掉blob对象

      }

    }).catch((err) => {

      console.log(err, 'err');

    });

  },

  handlerResponseError(data) {

    const _this = this;

    const fileReader = new FileReader();

    fileReader.onload = function() {

      try {

        const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败

        console.log('后台返回的信息'，jsonData.msg);

       // dosomething……

      } catch (err) { // 解析成对象失败，说明是正常的文件流

        console.log('success...');

      }

    };

    fileReader.readAsText(data);

  },

PS：MDN官方解释：Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据（https://developer.mozilla.org/zh-CN/docs/Web/API/Blob）。

巴特西

导出文件，responseType设置了blob，实际返回了JSON格式的错误信息的处理方式

最新文章

热门文章