vue项目axios请求加loading

效果展示:

vue项目axios请求加loading_第1张图片

1.src文件夹里面找到main.js文件

2.在main.js中引入axios,引入mint-ui

        import Axios from 'axios';
        import Mint from 'mint-ui';
        Vue.use(Mint);

3.发起请求,打开loading

        //请求拦截器
        Axios.interceptors.request.use((config) => {
                Mint.Indicator.open({//打开loading
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
                return config;
        }, (err) => {
                return Promise.reject(err)

        })

4.响应回来关闭loading

        //响应拦截器
        Axios.interceptors.response.use((response) => {
                Mint.Indicator.close();//关闭loading
                return response;
        }, (err) => {
                return Promise.reject(err);

        })

vue项目axios请求加loading_第2张图片

你可能感兴趣的:(vue项目axios请求加loading)