vue axios 请求loading

最新推荐文章于 2025-05-21 17:35:09 发布

转载最新推荐文章于 2025-05-21 17:35:09 发布 · 1.6k 阅读

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并配置Axios和Mint-UI库，实现带有Loading效果的HTTP请求。具体步骤包括：在main.js文件中引入Axios和Mint-UI；通过Vue.use()全局注册Mint-UI；设置Axios的请求和响应拦截器以控制Loading组件的显示与隐藏。

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);

})