vue项目axios封装

import axios from 'axios';
import qs from 'qs';

/* 通用设置 */
axios.defaults.timeout = 1000 * 10; //请求超时设置，10秒超时
axios.defaults.headers.post['Content-type'] = 'application/json;charset=UTF-8'; //设置数据格式

/* 环境切换 */
const env = process.env.NODE_ENV; //获取环境
const envConfig = {
    development: '172.0.0.1', //开发环境
    dubug: '172.0.0.2', //调试环境
    production: '172.0.0.3' //生产环境
};
axios.defaults.baseURL = envConfig[env];

/* 请求拦截 */
axios.interceptors.request.use(
    config => {
    	//(此处可以放公共加载状态提示)//
        config.headers.Authorization = 'XXXXXXXX'; //设置token(需要配合vuex使用)
        return config;
    },
    error => {
        return Promise.error(error);
    }
);

/* 响应拦截 */
axios.interceptors.response.use(
    response => {
    	//(此处可以关闭公共加载状态)//
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)); //状态码为200接口访问成功，其他抛出错误
    },
    error => {
    	//(此处可以关闭公共加载状态)//
        if (error.response && error.response.status) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误，未找到该资源';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        }

        return Promise.reject(error);
    }
);

/**
 * post、put、patch共用请求
 * @param {String} type 请求类型
 * @param {String} url 请求的url地址
 * @param {Object} params 请求提交的参数
 */
function commonRequest(url, params, type, config) {
    return new Promise((resolve, reject) => {
        axios[type](url, qs.stringify(params), config).then(
            //qs序列化参数
            res => {
                resolve(res.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

export default {
    /**
     * get请求
     * @param {String} url 请求的url地址
     * @param {Object} params 请求提交的参数
     */
    get(url, params, config) {
        return new Promise((resolve, reject) => {
            config = config || {};
            config.params = params;
            axios.get(url, config).then(
                res => {
                    resolve(res.data);
                },
                err => {
                    reject(err);
                }
            );
        });
    },
    /**
     * post请求
     * @param {String} url 请求的url地址
     * @param {Object} params 请求提交的参数
     */
    post(url, params, config) {
        return commonRequest(url, params, 'post', config);
    },
    /**
     * put请求
     * @param {String} url 请求的url地址
     * @param {Object} params 请求提交的参数
     */
    put(url, params, config) {
        return commonRequest(url, params, 'put', config);
    },
    /**
     * delete请求
     * @param {String} url 请求的url地址
     * @param {Object} params 请求提交的参数
     */
    delete(url, params, config) {
        return new Promise((resolve, reject) => {
            config = config || {};
            config.params = params;
            axios.delete(url, config).then(
                res => {
                    resolve(res.data);
                },
                err => {
                    reject(err);
                }
            );
        });
    },
    /**
     * patch请求
     * @param {String} url 请求的url地址
     * @param {Object} params 请求提交的参数
     */
    patch(url, params, config) {
        return commonRequest(url, params, 'patch', config);
    }
};

参考链接：vue中Axios的封装和API接口的管理（更新）