vue项目axios请求全局加loading

最新推荐文章于 2024-07-11 13:45:52 发布

小不着调°

最新推荐文章于 2024-07-11 13:45:52 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue移动端

原文链接：https://blog.csdn.net/sky_LQ/article/details/80983056

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果展示
在这里插入图片描述
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);

    })

在这里插入图片描述