axios封装

axios依靠其优异的性能与特性已经逐渐赶超原生ajax、jquery ajax以及fetch的势头。

虽然它本身已经是一个非常优秀的框架了，但是我们在项目实践中，还需要对axios再进行一次封装，满足项目的个性化请求方式。

以下是可借鉴的封装源码：

// request.js
import axios from 'axios';
import { AJAX_HOST } from './config';

// 请求拦截器
axios.interceptors.request.use(
    config => {
        return Promise.resolve(config);
    },
    err => {
        let errMsg = '';
        if (error && error.response) {
            const map = new Map([
                [400, '错误请求'],
                [401, '未授权，请重新登录'],
                [403, '拒绝访问'],
                [404, '请求错误,未找到该资源'],
                [405, '请求方法未允许'],
                [408, '请求超时'],
                [500, '服务器端出错'],
                [501, '网络未实现'],
                [502, '网络错误'],
                [503, '服务不可用'],
                [504, '网络超时'],
                [505, 'http版本不支持该请求']
                // ...
            ]);
            const defaultErrorMsg = `连接错误，服务器返回的状态码为 ${err.response.status}`;
            errMsg = map.get(err.response.status) || defaultErrorMsg;
        } else {
            errMsg = "连接到服务器失败";
        }

        return Promise.reject(errMsg)
        // return Promise.reject(err);
    },
);

// 响应拦截器
axios.interceptors.response.use(
    res => {
        if (res.code === 200) {
            return Promise.resolve(res);
        } else {
            // 在实际项目中，需要根据项目情况，编写请求失败提示代码
            // console.log(res.msg);
            return Promise.reject();
        }
    },
    err => {
        console.log(err);
        let errMsg =
        return Promise.reject(err);
    },
);

export default {
    async get(url = "", data = {}, options) {
        return axios.get(AJAX_HOST + url, data, options);
    },

    async post(url = "", data = {}, options) {
        return axios.post(AJAX_HOST + url, data, options);
    },
}

// config.js
export default {
    AJAX_HOST: 'https://www.xxx.com/api',
};