axios 二次封装

axios 二次封装

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

// 根据环境变量区分接口的默认地址
switch (process.env.NODE_ENV) {
    case ('production'): // 生产环境
        axios.defaults.baseURL = "http://api.chishi.com"
        break
    case ('test'): // 测试环境
        axios.defaults.baseURL = "http://192.168.0.1:8080"
        break
    default: // 开发环境
        axios.defaults.baseURL = "http://127.0.0.1:8080"
}


// 设置请求传递数据的格式
// x-www-form-urlencoded，注意看后台需要我们返回什么样的数据，也有可能是返回 json
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';// 配置请求头
axios.defaults.transformRequest = data => qs.stringify(data);
// qs.stringify({name: 'lisi',age: 13}) 
//qs 数据转换后 name='lisi'&&age=13

/**
 * 设置请求拦截器
 * 客户端发送请求 -> [请求拦截器] -> 服务器
 * token 校验
 */
axios.interceptors.request.use( config => {
    // config 就是发送请求的配置项
    const token = sessionStorage.getItem('token');
    // 也可以 axios.defaults.headers.Authorization = token
    token && (config.headers.Authorization = token)
    return config;
}, error => {
    return Promise.reject(error);
})

/**
 * 响应拦截器
 * 服务器返回信息 -> [拦截的统一处理] -> 客户端js获取到信息
 */
// 根据 status 判断返回是否请求成功，成功就执行响应拦截器的response 成功回调，否则就执行失败。不过公司一般都不配置
// axios.defaults.validateStatus = status => {
//     // 自定义响应成功的Http状态码
//     return /^(2|3)\d{2}$/.test(status);
// }
axios.interceptors.response.use(response => {
    // axios.get().then(res => {}) 这里返回的数据就是请求成功后接受的数据res 
    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;