导出文件接口报300，前端解决方案

最新推荐文章于 2024-05-16 13:22:31 发布

原创最新推荐文章于 2024-05-16 13:22:31 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue+element项目bug

vue+element项目bug 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种处理后台返回流数据的错误信息的方法，通过使用axios和FileReader将流转换为JSON，实现对特定错误代码的捕获和用户友好提示。

当后台返回的报错信息是一个流的时候，前端不能直接拿到信息，需要进行转化。

axios({
  url: '接口地址',
  method: 'post',
  responseType: 'blob',
  headers, // 请求头
  data // 导出数据传参
}).then((res) => {
  if(res){
  // 将流转换为json
    var reader = new FileReader();
    reader.onload = function(event){
      let message  = '';
      try {
        message  = JSON.parse(reader.result);
        if(message.hasOwnProperty('responseCode') && message.responseCode=='300'){
         // 给出提示语，进行拦截提示
          that.$notify({
            type: 'error',
            message: message.messageList[0].message,
            duration: 1500
          });
        }
      }catch (e) {
       // 如果是正常情况，返回的文件流就不会出现response，所以用try...catch进行处理一下
        const content = res;
        const dowLoadFileName = "导出的文件名";
        this.exportSearchList(dowLoadFileName, content);
      }
    };
    reader.readAsText(res);
  }
}).catch((error) => {
  throw error;
});