Axios导出Excel时的异常处理

最新推荐文章于 2024-08-07 14:53:07 发布

zqian1994

最新推荐文章于 2024-08-07 14:53:07 发布

阅读量771

点赞数 2

分类专栏： Vue 文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/zqian1994/article/details/126226637

版权

Vue 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

该博客探讨了在使用Axios进行接口调用时遇到的问题，即如何在参数正常时处理二进制流文件导出，以及在参数异常时读取并显示错误信息。解决方案是通过检查响应数据类型，若为JSON则读取并解析错误信息，若为文件则转换为Blob进行文件下载。提供的代码示例展示了这一处理过程。

摘要由CSDN通过智能技术生成

结果返回说明

参数或异常时后端返回异常JSON，用于提示：

{
	code: 500
	data: null
	message: "*****"
	success: false
}

参数正常时后端返回二进制流，用于文件导出：
在这里插入图片描述

Axios封装及问题

在这里插入图片描述
axios封装导出时，需设置responseType: ‘blob’，导致接口返回值读取reponse时为blob，无法直接读取到code、messge等JSON信息；取消responseType: ‘blob’则会影响正常下载。

解决方案

将blob的内容转成文件读取，根据response.data里的type去判断返回的类型。

显示报错信息时处理：

 if (res.data.type == 'application/json') {
    const reader = new FileReader();  // 创建一个FileReader实例
    reader.readAsText(res.data, 'utf-8'); // 读取文件,结果用字符串形式表示
    reader.onload = function () { // 读取完成后,获取reader.result
      const data = JSON.parse(reader.result);
      if (data.code != 200) {
        errorMsg(data.message || '导出失败')
      }
    }
  }

作为excel导出时处理：

    // 解析请求头，获取文件名
    const fileName = res.headers["content-disposition"].split("=")[1];
    const blob = new Blob([res.data], {
      type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    const url = window.URL.createObjectURL(blob);
    const aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = url;
    aLink.setAttribute("download", decodeURI(fileName));
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink); // 下载完成移除元素
    window.URL.revokeObjectURL(url); // 释放掉blob对象

完整代码如下

此处封装成独立方法

export function exportExcleUtil(res) {
  if (res.data.type == 'application/json') {
    const reader = new FileReader();  // 创建一个FileReader实例
    reader.readAsText(res.data, 'utf-8'); // 读取文件,结果用字符串形式表示
    reader.onload = function () { // 读取完成后,获取reader.result
      const data = JSON.parse(reader.result);
      if (data.code != 200) {
        errorMsg(data.message || '导出失败')
      }
    }
  } else {
  	// 解析请求头，获取文件名
    const fileName = res.headers["content-disposition"].split("=")[1];
    const blob = new Blob([res.data], {
      type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    const url = window.URL.createObjectURL(blob);
    const aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = url;
    aLink.setAttribute("download", decodeURI(fileName));
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink); //下载完成移除元素
    window.URL.revokeObjectURL(url); //释放掉blob对象
  }
}