// 引入模块
import axios from "axios";
import qs from 'qs';

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

/*
    设置超时时间和跨域是否允许携带凭证
*/
axios.defaults.timeout = 10000; // 10秒
axios.defaults.withCredentials = true;

/*
    设置POST请求传递数据的格式(看服务器要求什么格式)
    x-www-form-urlencoded
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data); // 可以将post请求的数据转成键:值对的形式存储 例如:name="张三";

/*
    设置请求拦截器
    客户端发送请求 ——> [请求拦截器] ——> 服务器
    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 => {
//     // 自定义响应成功的HTTP状态码
//     return /^(2|3)\d{2}$/.test(status);
// }
axios.interceptors.response.use(response => {
    return response.data;
}, error => {
    let { response } = error;
    if (response) {
        // 请求已发出,只不过不是200系列,设置不同状态的不同处理
        switch (response.status) {
            case 401: // 当前请求需要用户验证(一般是未登录)
                break;
            case 403: // 服务器已经处理请求,但是拒绝执行它(一般是TOKEN过期)
                localStorage.removeItem(token);
                // 跳转到登录页
                break;
            case 404: // 请求失败,请求所希望得到的资源未被在服务器上发现(找不到页面)
                break;
        }
    } else {
        // 服务器结果都没有返回
        if (!window.navigator.onLine) {
            // 断网处理:可以跳转到断网页面
            return;
        }
        return Promise.reject(error)
    }
})

// 默认暴露
export default axios;

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐