vue 中封装axios

傷城~ 2023-01-01 03:54 280阅读 0赞

vue 中封装axios

/api/index.js文件

import axios from "axios";
    import router from "../router/index";
    import Vue from "vue";
    //获取vue实例
    const _vue = Vue.prototype;
    
    // axios封装请求方法
    // axios配置
    const that = this;
    const config = { 
        baseURL: "",
        headers: { 
            "Content-type": "application/json"
        },
        timeout: 30000
    };
    const instance = axios.create(config);
    
    // 请求前做拦截，用于判断
    const requestInterceptor = instance.interceptors.request.use(
        config => { 
            // 拦截修改config
            // 返回到请求中配置
            // if (!config.headers.token) { 
            // // headers没有token令牌执行
            // config.headers.token = "no";
            // }
            _vue.$toast.loading({ 
                duration: 0
            });
            config.headers.token = localStorage.getItem("token") || "";
            return config;
        },
        error => { 
            // 立即执行失败的reject方法
            return Promise.reject(error);
        }
    );
    // 响应后做拦截，用于修改响应数据
    const responseInterceptor = instance.interceptors.response.use(
        response => { 
            // 对响应数据做点什么
            // console.log('对响应数据做点什么',response)
            // error_code: 10000无数据
            _vue.$toast.clear();
            if (
                response.data.error_code == 0 ||
                !response.data.error_code ||
                response.data.error_code == 10000
            ) { 
                return response.data;
            }
            if (
                response.data.error_code == 10001000 ||
                response.data.error_code == 7200
            ) { 
                // token丢失，过期
                // console.log(window.location)
                // window.location = "./#/login";
                router.replace({  name: "login" });
                return Promise.reject(response.data);
            } else { 
                return Promise.reject(response.data);
            }
        },
        error => { 
            // 立即执行响应的reject方法
            return Promise.reject(error);
        }
    );
    // 移除拦截器
    // interceptors.request.eject(requestInterceptor);
    // interceptors.request.eject(responseInterceptor);
    
    const get = (url, data = { }) => { 
        return instance.get(url, { 
            params: data
        });
    };
    
    const post = (url, data = { }) => { 
        return instance.post(url, data);
    };
    const api = { 
            requetApi: data => get("接口url", data), // 接口
        };
    export default api ;

main.js文件

// vant按需引入
    import { 
        Loading,
        Toast,
    } from "vant";
    import "vant/lib/index.css";
    Vue..use(Loading)
        .use(Toast);
        
    import api from "./api/index.js";
    Vue.prototype.$api = api;