使用vant封装全局loading在调接口时请求

在Vant框架中，封装全局loading通常是为了提供一种优雅的方式来管理应用在发起网络请求时的状态表示，比如当用户正在加载数据或页面时显示一个加载指示。以下是使用Vant组件库中的` vant-loading `实现全局加载的一个简单示例：

1. 首先，在你的项目中安装Vant库，如果还没有安装，可以运行：

   npm install vant

2. 引入` loading` 组件：

   import { Loading } from 'vant';

3. 创建一个Vue实例或模块来保存这个loading状态管理器：

   export default {
     data() {
       return {
         loading: false,
       };
     },
     methods: {
       setLoading(isLoading) {
         this.loading = isLoading;
         // 当你在项目中的各个地方需要展示或隐藏loading时，调用这个方法
       },
     },
   }

4. 调用接口时，先开启loading状态：

   async fetchData() {
     this.setLoading(true);
     try {
       const response = await axios.get('your-api-url');
       // 处理返回数据
     } catch (error) {
       console.error(error);
     } finally {
       // 请求完成后关闭loading
       this.setLoading(false);
     }
   },

5. 在需要的地方使用`<van-loading>` 组件来显示加载效果，并绑定到上面的`loading` 变量：

   <template>
     <div>
       <van-button @click="fetchData">加载数据</van-button>
       <van-loading v-if="loading" size="small"></van-loading>
     </div>
   </template>