使用vant全局封装调接口显示loading

Vant是一个轻量级的Vue UI组件库，它提供了一个方便的方式来管理全局状态和封装常用操作，比如加载状态。如果你想要在Vant中全局显示loading效果，你可以使用`vant-loading`这个组件。

首先，你需要安装`vant-loader`，这是Vant提供的一个预加载脚手架，可以帮助你在项目中全局引入Vant的组件。安装命令通常是：

npm install vant vant-loader -D

然后，在项目的main.js或者类似的核心入口文件中，导入并配置`vant-loading`：

import { createApp } from 'vue';
import App from './App.vue';
import Vant from 'vant';
import 'vant/lib/index.css'; // 引入全局样式
import Loading from 'vant-loading';

// 全局注册Vant组件
Vant.use({
  loading: Loading,
});

const app = createApp(App);
app.mount('#app');

每当需要展示加载状态时，你可以在Vue组件的模板中使用`<van-loading>`标签，例如：

<template>
  <div>
    <van-loading v-model="isLoading" />
    <!-- 加载内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false, // 初始状态为false
    };
  },
  methods: {
    async fetchData() {
      this.isLoading = true; // 开始加载时设置isLoading为true
      await someAsyncFunction(); // 假设这是一个异步操作
      this.isLoading = false; // 完成加载后设置回false
    },
  },
};
</script>

当`isLoading`变为`true`时，就会显示loading动画；当请求完成后再将其置为`false`，loading状态就会隐藏。