axios请求封装

axios请求封装

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

/**
 * 根据环境变量区分接口的默认地址
 */
switch(process.env.NODE_ENV){
    case 'production': // 生产环境
        axios.defaults.baseURL = "http://127.0.0.1:3000";
        break;
    case 'test': // 测试环境
        axios.defaults.baseURL = "http://127.0.0.1:3000";
        break;
    default: // 默认本地环境
        axios.defaults.baseURL = 'http://127.0.0.1:3000'
}

/**
 * 设置超时时间和跨域是否允许携带凭证
 */
axios.defaults.timeout = 10000; // 超时时间10s
axios.defaults.withCredentials = true; // 允许跨域携带凭证
/**
 * 设置请求传递数据的格式（看服务器要求什么格式）
 * x-www-form-urlencoded
 */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // post请求格式定义
axios.defaults.transformRequest = data => qs.stringify(data); // 将data数据转换成上面的格式
/**
 * 设置请求拦截器
 * 客户端发送请求 -> [请求拦截器] -> 服务器
 * 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);
});

/**
 * 设置响应拦截器
 * 服务器返回信息 -> [拦截的统一处理] ->客户端JS获取到信息
 */
// axios.defaults.validateStatus = status =>{
//     return /^(2|3)\d{2}$/.test(status);
// }
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;
        }
    }else{
        // => 服务器连结果都没有返回
        if(!window.navigator.onLine){
            // 断网处理：可以跳转到断网页面，创建一个断网页面
            return;
        }
        return Promise.reject(error);
    }
})

export default axios;