axios的封装

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

// 1.根据环境变量配置不同的地址
switch (process.env.NODE_ENV) {
    case production:
        // 生产环境
        axios.defaults.baseURL = 'http://api/xianwnag.cn';
        break;
    case test:
        // 测试环境
        axios.defaults.baseURL = 'http://api/xianwnag.cn';
        break;
    default:
        // 开发环境
        axios.defaults.baseURL = 'http://127.0.0.1:3000';
        break;
}

// 2.配置超时时间
axios.defaults.timeout = 10000;

// 3.跨域是否携带凭证
axios.defaults.withCredentials = true;

// 4.设置请求传递数据的格式(根据后台需要的格式配置 / 可以不设置)
// axios.defaults.headers['Content-Type'] = 'application/x-www-from-urlencoded';
// axios.defaults.transformRequest = data => qs.stringify(data);

// 5.设置请求拦截器 (在客户端发送请求到服务端之间设置一些东西)
// Token校验(JWT) 接收服务器返回的token，存储到vuex/本地存储中。没一次向服务器发送请求，我们应该把token带上
axios.interceptors.request.use((config) => {
    // 携带上token
    let token = localStorage.getItem('token');
    token && (config.headers.Authorization = token);

    return config;
}, error => {
    return Promise.reject(error)
});

// 6.设置响应拦截器
/*
 *  服务器返回信息 => [拦截的统一处理] => 客户端js获取到信息
 */
axios.interceptors.response.use(response => {
    // 只返回响应数据
    return response.data;
}, error => {
    let { response } = error;
    if (response) {
        // 服务器返回结果
        switch (response.status) {
            case '401':
                // 当前请求需要用户验证
                // 即可以跳转路由也可以弄一个蒙层提示信息
                break;
            case '403':
                // token过期 
                // 服务器拒绝执行禁止访问 可以跳转到登陆页面
                break;
            case '404':
                // 找不到页面
                break;
            case '500':
                // 服务器宕机了
                break;
            default:
                break;
        }

    } else {
        // 服务器没有返回结果
        // 判断客户端是否断网
        if (!window.navigator.onLine) {
            // 断网处理: 跳转到断网页面
            return;
        }
        return Promise.reject(error)
    }
})

export default axios;