axios基本使用封装

封装成一个函数 http

import Axios from 'axios';
import cookie from '@/lib/cookie';
// 下面的路径来自 .env 文件
export const baseUrl = process.env.VUE_APP_URL;

// 基本的 axios 配置
let axios = Axios.create({
    baseURL: baseUrl,
    timeout: 30000,
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
});

// 请求拦截
axios.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        if (cookie.getToken()) {
            config.headers['x-access-token'] = cookie.getToken();
        }
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 响应拦截
axios.interceptors.response.use(
    res => {
        if (res.config.responseType === 'blob') {
            let isReturnJson = res.headers && res.headers['content-type'] && res.headers['content-type'].indexOf("json") > -1;
            //后端返回错误信息
            if (isReturnJson) {
               // 处理下载文件接口失败（失败后端有返回说明）
                return true
            } else {
                //下载文件
                download(res);
            }
        } else {
            //正常json请求
            // 判断是否登录，是否...
        }
    },
    error => {
        console.log(error)
        Spin.hide();
        Message.error('服务内部错误');
        console.log('1111', error);
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

export const postAxios = (url, data) => {
    return axios.post(url, data);
};

export const postFormAxios = (url, data) => {
    return axios.post(url, data, {headers: {'Content-Type': 'x-www-form-urlencoded'}});
};

export const postFileUploadAxios = (url, data) => {
    return axios.post(url, data, {headers: {'Content-Type': 'multipart/form-data'}});
};

export const postDownloadAxios = (url, data) => {
    return axios.post(url, data, {responseType: 'blob'});
};

export const getAxios = (url, data) => {
    return axios.get(url, {params: data});
};

// 下载文件
function download(res) {
    let reader = new FileReader();
    let data = res.data;
    reader.onload = e => {
        if (e.target.result.indexOf('Result') != -1 && JSON.parse(e.target.result).Result == false) {
            // 进行错误处理
        } else {
            let fileName = "download";
            let contentDisposition = res.headers['Content-Disposition'];
            contentDisposition = contentDisposition ? contentDisposition : res.headers['content-disposition'];
            if (contentDisposition) {
                fileName = window.decodeURI(contentDisposition.split('=')[1], "UTF-8");
            }
            executeDownload(data, fileName);
        }
    };
    reader.readAsText(data);
}

//  模拟点击a 标签进行下载
function executeDownload(data, fileName) {
    if (!data) {
        return
    }
    let url = window.URL.createObjectURL(new Blob([data]));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

外部调用

import {getAxios, postDownloadAxios } from '@/http';
export const UserCenter = {
  // 下载
  downloadAuthFile: data => {
    return postDownloadAxios('/xx/xx', data);
  },
  // 获取用户列表
  getUserList: () => {
    return getAxios('/xx/xx');
  }
};