vue 这种流数据如何获取?

作者站长头像
站长
· 阅读数 15

控制台打印的response:vue 这种流数据如何获取?但是我却获取不到这个data,断点打印的res是个空对象vue 这种流数据如何获取?公共方法:

export const createExcel = (res, name) => {
  let blob = new Blob([res], {
    type: 'application/vnd.ms-excel',
  });
  let fileName = name + '.xlsx'; // 文件名+后缀
  // 允许用户在客户端上保存文件
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName);
  } else {
    // eslint-disable-next-line no-debugger
    debugger;
    var link = document.createElement('a'); //定义一个a标签
    link.href = window.URL.createObjectURL(blob); //需要生成一个 URL 来实现下载,链接到blob上
    link.download = fileName; //下载后的文件名称
    console.log('fileName', link);
    link.click(); //模拟在按钮上实现一次鼠标点击
    window.URL.revokeObjectURL(link.href); //释放 URL 对象
  }
};

页面调用

getOrganExport({ parentId: this.nodeId })
          .then((res) => {
            console.log('res----', res);
            createExcel(res, '组织管理表');
            this.$message.success('导出成功');
          })
          .catch(() => {
            this.$message.error('导出失败,请稍后再试');
          });

service封装:

import axios from 'axios';
import qs from 'qs';
import { Message } from '@jdt/find';
// import Cookies from 'js-cookie';

const defaultOptions = {
  baseURL: '/api',
  method: 'post', // 请求 type  get post delete header put
  withCredentials: true, // 设置该属性可以把 cookie 信息传到后台
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json; charset=utf-8',
  },
};

const http = axios.create(defaultOptions);

http.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const { method, data, headers, baseURL } = config;
    // 如果参数中有baseURL‘,更新默认baseURL
    if (baseURL && baseURL === process.env.VUE_APP_BASE_URL) http.baseURL = baseURL;

    if (method !== 'get' && method !== 'head') {
      if (data instanceof FormData) {
        config.data = data;
        // config.headers = {
        //   ...headers,
        //   'x-requested-with': 'XMLHttpRequest',
        //   'cache-control': 'no-cache',
        // };
        delete config.headers;
      } else if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
        config.data = qs.stringify(data);
      } else {
        // 是否需要去除无用数据
        // Object.keys(data).forEach((item) => {
        //   if (data[item] === null || data[item] === undefined || data[item] === '') {
        //     delete data[item];
        //   }
        // });
        config.data = JSON.stringify(data);
      }
    }
    if (method === 'get') {
      config.paramsSerializer = function (params) {
        return qs.stringify(params, {
          arrayFormat: 'indices',
        });
      };
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

http.interceptors.response.use(
  (response) => {
    console.log(response);
    const { data: { data, status = true, error = {} } = {} } = response;
    if (!status) {
      const msg = error.msg || '服务端执行出错!';
      if (error.code === 'REL001') {
        return Promise.reject(msg);
      } else {
        Message.error(msg);
      }
      return Promise.reject(msg);
    }
    return data || {};
  },
  (error) => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      const { status: responseStatus } = error.response;
      if (responseStatus === 401) {
        // 记录当前跳出登录地址,登录成功后跳回来
        // Cookies.set('origin_url', window.location.href);
        // window.location = '/login';
      } else if (responseStatus === 403) {
        // 没有权限
        Message.error('没有权限操作!');
      } else {
        const msg = error.response?.data?.error?.msg || '服务端接口异常!';
        Message.error(msg);
        return Promise.reject(new Error(msg));
      }
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error(error);
      return Promise.reject(new Error('请求出错!'));
    }
    return Promise.reject(error);
  }
);

export default http;
回复
1个回答
avatar
test
2024-07-16

你的res来自于response.data.data,可是实际上你的文件流数据的位置是response.data


比如你可以这样修改,仅供参考

service.interceptors.request.use(
  (config) => {
    if(config.noverify){
      config.headers["noverify"] = true
      delete config.noverify
    }
    return config;
  },
  (error) => {
    // 发送失败
    Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    console.log(response);
      let noverify = response.config.headers.noverify
      if (noverify) {
        const { data } = response;
        retrun data
      }else{
          const { data: { data, status = true, error = {} } = {} } = response;
          if (!status) {
              const msg = error.msg || '服务端执行出错!';
              if (error.code === 'REL001') {
                return Promise.reject(msg);
              } else {
                Message.error(msg);
              }
              return Promise.reject(msg);
            }
            return data || {};
      }
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);

使用的时候就是

http({
    url: "xxx",
    method: "post",
    noverify: true
  })
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容