(资料图片仅供参考)

问题背景

axios请求下载文件时会设置responseType: "blob’来处理，此时如果响应数据错误，则无法下载文件且同时没有把相关的错误信息提示处理。因为返回的是Blob 对象，无法获取到普通对象中的错误信息。

例如：

{"code":450002,"data":null,"msg":"下载出错"}

这就需要在下载文件时做响应数据的处理。以下是通过axios响应拦截器的处理。

解决方案

1、首先判断响应数据Bolb类型，如果错误信息是一个 JSON 格式的 Blob，那么读取 Blob 的内容并解析为 JSON 对象

axios.interceptors.response.use(  response => {    // 对响应进行处理    return response;  },  error => {    // 处理请求错误    if (error.response && error.response.data instanceof Blob && error.response.data.type === "application/json") {      // 如果错误信息是一个 JSON 格式的 Blob，那么读取 Blob 的内容并解析为 JSON 对象      return error.response.data.text().then(text => {        const json = JSON.parse(text);        console.log(json);        // 返回一个包含错误信息的 Promise 对象        return Promise.reject(json);      });    }    // 如果错误信息不是一个 JSON 格式的 Blob，那么返回原始的错误对象    return Promise.reject(error);  });

在这个示例中，我们检查了错误对象的 response.data是否为 Blob 对象，且 MIME 类型为 application/json，如果是，我们就使用 text()方法将 Blob 对象的内容读取为字符串，然后解析为 JSON 对象并打印出来。最后，我们返回一个包含错误信息的 Promise 对象，以便后续处理。

2、如果错误信息是正常响应返回的，那Bolb的类型则需要在response里面去处理，例如：

axios.interceptors.response.use(response => {if (response.data) {  // 判断Bolb类型是否有错误信息  if (      res.data instanceof Blob &&      res.data.type === "application/json"  ) {    let reader = new FileReader()      reader.readAsText(res.data, "utf-8")      reader.onload = function(e) {          let data = JSON.parse(e.target.result)          if (data.code !== 0) {              Message.error(data.msg)          }      }      return Promise.resolve(res)  }})

标签：