接口设置responseType: “arraybuffer“;导致识别不了报错信息问题

请求时的responseType的值设为arraybuffer,但是注意,这会引起一个问题,返回结构的data中所有内容都会是这种格式,包括json和字符串,因此,如果是其他的报错信息,也无法按之前的方式打印。

后台返回的标志信息都无法获取,无法区分是否正确,因此,跟后台协商,添加请求头参数(或者修改请求头参数),通过请求头参数来判断正确错误。

数据处理:

1、文件格式信息

let blob = new Blob([接收到的数据],{type: 'application/文件格式'}) 一定要加[]

然后创建a标签,设置路径(window.URL.createObjectURL(blob)),用.download设置文件名称,然后通过.click()来自动下载

2、文字信息

const blob = new Blob([接收到的数据])

然后使用fileReader对象进行数据转换和输出

const reader = new FileReader()

reader.readAsText(blob, 'utf-8')

reader.onload = function() {

const resData = JSON.parse(reader.result);

console.log(resData) //输出文字

}

import Axios from "axios";
import ElementUI from "element-ui";
let url = "";
Axios.get(url, {
      params: {},
      headers: {},
      responseType: "arraybuffer"
    })
      .then(res => {
        // 判断响应头,如果响应头是json格式的说明有异常
        if (res.headers["content-type"].indexOf("application/json") > -1) {
          hideLoading();
          const blob = new Blob([res.data]);
          // 然后使用fileReader对象进行数据转换和输出;
          const reader = new FileReader();
          reader.readAsText(blob, "utf-8");

          reader.onload = function () {
            const resData = JSON.parse(reader.result || "{}"); //输出文字
            const errMsg = resData.msg || "导出文件异常!";
            ElementUI.Message({
              message: errMsg,
              showClose: true,
              type: "error"
            });
          };
          return;
        }

        const url = window.URL.createObjectURL(
          new Blob([res.data], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          })
        );
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;

        // 获取导出文件的名称
        const fileNameStr = res.headers["content-disposition"];
        var reg = /filename=(.*)/;
        var arr = reg.exec(fileNameStr);
        var fileName = "导出文件";
        if (arr && arr[1].trim()) {
          if (arr[1].trim().indexOf('"') !== -1) {
            fileName = decodeURI(arr[1].trim().slice(1, arr[1].length - 1));
          } else {
            fileName = decodeURI(arr[1].trim());
          }
        }
        fileName = common.checkFileName(fileName);
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
      .catch(function () {
        ElementUI.Message({
          message: $T("请检查网络是否连接正常"),
          showClose: true,
          type: "error"
        });
      });

你可能感兴趣的:(前端,javascript,blob)