axios配置遇到的问题

1、一个vue项目中需要同时配置一个php环境axios请求、一个java环境axios请求。
第一个axios默认baseUrl
第二个java axios直接域名+接口拼接 去覆盖baseurl
其它默认配置 按需处理

axios.get(`${url.javaApiUrl}${api}`, {
      params: {
        ...data,
      },
    });

2、配置axios content-type
常规格式如下

switch (method) {
    case 'get' || 'GET': // GET请求方式
      axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      break;
    case 'file': // 文件上传请求
      axios.defaults.headers['Content-Type'] = 'multipart/form-data';
      break;
    default: // 其他请求方式
      axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
      break;
  }

3.在配置文件下载时,获取后台返回信息,可使用readFile()转化blob onload进行读取

/** 
 * 数据流导出专用axios请求
*/
import axios from 'axios';
import url from './url';
import store from '@/store';
import { Message } from 'element-ui';

const axiosExport = (method, fileName) => {
    let myUrl = url.apiUrl + method;
    if (store.state.sourceId && store.state.auth.type === 4) { // 除登录接口之外,每次传递参数都需要携带token
        let sourceId = store.state.sourceId;
        myUrl = myUrl + '&sourceId=' + sourceId;
    }
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: myUrl,
      responseType: 'blob'
    })
    .then((response) => {
        console.log(response);       
        // 将文件流转成blob形式
        const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
        let reader = new FileReader();
        reader.readAsText(blob);
        reader.onload = (e) => {
          let res = '';
          try {
            res = JSON.parse(e.target.result);
          } catch {
            //
          }      
          if (res && res.code === 101) {
            Message(res.errorMsg);
          } else {
            resolve(response); 
            let filename = fileName + '.xls';
            if(window.navigator.msSaveOrOpenBlob) {// 兼容IE10
              navigator.msSaveBlob(blob, filename);
            } else {
              // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
              const elink = document.createElement('a');
              elink.download = filename;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }     
          }      
        };       
    }).catch((error) => {
        console.log(error);
        reject(error);
    });
  }); 
};

export default axiosExport;

4、axios post下载文件

/** 
 * 数据流导出专用axios请求
*/
import axios from 'axios';
import url from './url';
import store from '@/store';

const axiosPostExport = (method, fileName, data) => {
    let myUrl = url.apiUrl + method;
    if (store.state.sourceId && store.state.auth.type === 4) { // 除登录接口之外,每次传递参数都需要携带token
        let sourceId = store.state.sourceId;
        myUrl = myUrl + '&sourceId=' + sourceId;
    }
  return new Promise((resolve, reject) => {
    axios({
      method: 'post',
      url: myUrl,
      responseType: 'blob',
      data: data,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    })
    .then((response) => {
        console.log(response);
        resolve(response);
        // 将文件流转成blob形式
        const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
        let filename = fileName + '.xls';
        if(window.navigator.msSaveOrOpenBlob) {// 兼容IE10
          navigator.msSaveBlob(blob, filename);
        } else {
          // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件
          const elink = document.createElement('a');
          elink.download = filename;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        }     
    }).catch((error) => {
        console.log(error);
        reject(error);
    });
  }); 
};

export default axiosPostExport;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值