vue3利用axios做全屏Loading

你可以使用axios拦截器来实现全屏Loading效果。下面是一个示例代码：

首先，在你的项目中安装axios和一个用于显示Loading的库，比如vue-loading-overlay。

npm install axios vue-loading-overlay

然后，在你的main.js或者需要使用axios的地方导入axios和vue-loading-overlay：

import axios from 'axios';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);

接下来，你可以创建一个axios实例，并在拦截器中添加全屏Loading逻辑：

const api = axios.create({
  baseURL: 'http://your-api-url.com',
});

api.interceptors.request.use(config => {
  // 在请求开始前显示Loading
  Loading.show();
  return config;
}, error => {
  return Promise.reject(error);
});

api.interceptors.response.use(response => {
  // 在请求结束后隐藏Loading
  Loading.hide();
  return response;
}, error => {
  // 在请求出错时也要隐藏Loading
  Loading.hide();
  return Promise.reject(error);
});

现在，你可以使用`api`对象来发送请求，并且在请求期间会显示全屏Loading效果。

api.get('/some-endpoint')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

这样，当发起请求时，会自动显示全屏Loading，请求结束后会隐藏Loading。你可以根据需要自定义Loading的样式和行为。