axios封装中使用loading

旧城等待， 2023-01-07 04:56 418阅读 0赞

先安装

npm install axios
    npm i element-ui -S

在main.js中引入

// vant按需引入
    //import {Loading, Toast} from "vant";
    // import "vant/lib/index.css";
    // Vue.use(Loading).use(Toast)
    
    // element-ui样式
    import "element-ui/lib/theme-chalk/index.css";

在api.js中使用

import axios from "axios";
    // import router from "../router/index";
    // import Vue from "vue";
    //获取vue实例
    // const _vue = Vue.prototype;
    import {  Loading } from 'element-ui';
    
    // axios封装请求方法
    // axios配置
    const that = this;
    const config = { 
        baseURL: "",
        headers: { 
            "Content-type": "application/json"
        },
        timeout: 30000
    };
    const instance = axios.create(config);
    
    // 请求前做拦截，用于判断
    let loadingInstance;
    const requestInterceptor = instance.interceptors.request.use(
        config => { 
            // 拦截修改config
            // 返回到请求中配置
            // if (!config.headers.token) { 
            // // headers没有token令牌执行
            // config.headers.token = "no";
            // }
            // _vue.$toast.loading({ 
            // duration: 0
            // });
            loadingInstance = Loading.service({  fullscreen: false, background: 'rgba(0,0,0,0)', text: '网络加载...' });
            return config;
        },
        error => { 
            // 立即执行失败的reject方法
            return Promise.reject(error);
        }
    );
    // 响应后做拦截，用于修改响应数据
    const responseInterceptor = instance.interceptors.response.use(
        response => { 
            // 对响应数据做点什么
            // console.log('对响应数据做点什么',response)
            // error_code: 10000无数据
            // _vue.$toast.clear();
            loadingInstance.close();
            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丢失，过期
                // 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);
    };
    class Services { 
        api = { 
            share: data => get("/share", data) // 分享请求（自己的接口地址）
        };
    }
    export default Services;

以上注销部分是移动端使用vant的loading