axios 二次封装

喜你入骨 提交于 2020-03-30 15:49:54
//对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;

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!