axios二次封装

258 阅读1分钟
    import axios from "axios"
    import qs from "qs"
    switch (process.env.NODE_ENV) {
        case 'production':
            axios.defaults.baseURL = 'http"生产服务器地址.cn'   部署到服务器上的环境
            break;

        case 'test':
            axios.defaults.baseURL = 'http"测试服务器地址.cn'    测试服务器的环境
            break;
        default:
            axios.defaults.baseURL = 'http"默认地址.cn'     默认

    }
    // 设置超时间和跨域允许是否携带凭证
    axios.defaults.timeout = 毫秒; 延迟时间
    axios.defaults.withCredentials = true  是否允许携带凭证

    // 设置请求传递格式
    axios.defaults.headers['content-type'] = 'application/x-www-form-urlencoded'
    axios.defaults.transformRequest[(data) => {
        qs.stringify(data)
    }]
    // 请求拦截器

    // 客户端-- > 请求拦截器-- > 服务器
    // TOKEN_校验(jwt) 接受服务器返回的TOKEN_, 存储到vuex或者本地存储中,每一次向服务器发送请求,都应该携带TOKEN_
    axios.interceptors.request.use(config => {
        // 携带TOKEN_
        const token = localStorage.getItem('token')
        token && (config.headers.Authorization = token)
        return config;
    }, error => {
        return Promise.reject(error);
    });

    // 响应拦截器
    服务器返回信息-- > 拦截统一处理-- > 客户端获取到信息
    axios.defaults.validateStatus = status => {
        // 自定义响应成功的http状态码,
        return /^(2|3)\d{2}$/.test(status)
    }
    //axios设置响应拦截器
    axios.interceptors.response.use(response => {
        return response.data //拦截处理响应结果,直接返回需要的数据
    }, err => {
        let { response } = error;
        if (response) {
            switch (response.status) {
                case 401: //权限未登录

                    break;
                case 403: //服务器拒绝执行,token过期

                    break;
                case 404: //找不到页面

                    break;

                default:
                    break;
            }
            可以判断服务器返回结果了
        } else {
            if (!window.navigator.onLine) {
                // 断网处理,
            }
            return Promise.reject(err);
        }
    })
    export default axios;