axios 二次封装


//对axios进行二次封装

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

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

//设置超时时间和跨域是否允许携带凭证
axios.defaults.time = 10000;
axios.defaults.withCreadentials = true ;

//设置 请求传递数据的格式
axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);

//设置请求拦截器
//客户端发送请求 - > [请求拦截器] - > 服务器
//TOKEN校验 (JWT):接收服务器返回的token,存储到本地存储中,每一次向服务器发请求,需要把token带上
axios.interceptors.reques.use((config) => {
    //携带token
    const token = localStorage.getItem('token');
    token && (config.headers.Authorization = token);
    return config;
},error => {
    return Promise.reject(error)
    }
);

//响应拦截器
//服务端返回信息 - > [拦截的统一处理] - > 客户端的js获取到信息

// axios.defaults.validateStatus = status => {
//     //自定义响应成功的HTTP状态码
//     return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(response => {
    return response
}, 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;

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM