vue3中使用axios请求接口并针对返回json格式数据或二进制流数据做不同处理

import axios from "axios";

axios({
    method: "POST",
    withCredentials: false,
    headers: {
    },
    url:"/myurl",
    data: params,
    responseType: "blob"
  }).then((res) => {
    if (res.headers["content-type"] === "application/json") {
      //返回json格式的数据
      const reader = new FileReader();
      reader.readAsText(res.data, "utf-8");
      reader.onload = function (e) {
        //获取返回的json数据，并将其转换为对象格式
        const textInfo = JSON.parse(e.target.result);
       //根据返回的json数据做不同的操作
        
      };
    } else {
       //对返回二进制流格式数据进行下载
      const link = document.createElement("a"); //创建一个a标签
      const url = window.URL.createObjectURL(new Blob([res.data]), {
        type: "application/vnd.ms-excel;charset=utf-8"
      }); //将blob文件对象通过URL.createObjectURL()方法转为为url
      link.href = url; //为a标签设置href属性，并赋值为url
      link.download = "我的文件.xlsx"; //定义下载的文件名，文件名要包含后缀哟！如'导出EXCEL.xlsx'
      document.body.appendChild(link); //把a标签放在body上
      link.click(); //出发a标签点击下载
      document.body.removeChild(link); //在body中移除这个a标签
      window.URL.revokeObjectURL(url); //释放blob对象
    }
  });

当然这样直接写是挺麻烦的，可以封装成一个公用api,将这种数据情况的处理方法用回调函数的形式进行实现

import axios from 'axios'

/**
*@description 
*@params{Array} data   array[0]:请求方式  array[1]:请求路径 array[2]：请求参数
*@params{function} success
*@params{function} error
*/

export twoTypeDataInReturn =(data,success,error)=>{

axios({
    method: array[0]
    withCredentials: false,
    headers: {
    },
    url:array[1],
    data: array[2],
    responseType: "blob"
  }).then((res) => {
    if (res.headers["content-type"] === "application/json") {
      //返回json格式的数据
      const reader = new FileReader();
      reader.readAsText(res.data, "utf-8");
      reader.onload = function (e) {
        //获取返回的json数据，并将其转换为对象格式
        const textInfo = JSON.parse(e.target.result);
       //根据返回的json数据做不同的操作
        success(textInfo)
        
      };
    } else {
        error()
       //对返回二进制流格式数据进行下载
      const link = document.createElement("a"); //创建一个a标签
      const url = window.URL.createObjectURL(new Blob([res.data]), {
        type: "application/vnd.ms-excel;charset=utf-8"
      }); //将blob文件对象通过URL.createObjectURL()方法转为为url
      link.href = url; //为a标签设置href属性，并赋值为url
      link.download = "我的文件.xlsx"; //定义下载的文件名，文件名要包含后缀哟！如'导出EXCEL.xlsx'
      document.body.appendChild(link); //把a标签放在body上
      link.click(); //出发a标签点击下载
      document.body.removeChild(link); //在body中移除这个a标签
      window.URL.revokeObjectURL(url); //释放blob对象
    }
  });

}

调用

import {twoTypesDataInReturn} from "xxxx.js"

twoTypesDataInReturn(data,(result)=>{
//返回json字符串的处理逻辑
},()=>{
//返回二进制文件流的处理逻辑
})

当然这里只是提供一个对返回两种数据接口的处理方式，以及在此种方式的基础上对公用api的一个封装思路，具体代码逻辑还可以根据具体业务去优化。