vue3的axios实现异步加载

在Vue 3中，使用axios作为HTTP客户端进行异步数据加载通常涉及以下几个步骤：

1. 安装axios库：
首先确保你在项目中安装了axios，可以通过npm或yarn进行安装：

   npm install axios
   # 或者
   yarn add axios

2. 创建实例（可选）：
在Vue组件中，你可以创建一个axios的实例，以便在应用中复用，减少全局污染：

   import axios from 'axios';

   const service = axios.create({
     baseURL: process.env.BASE_API, // api的base_url
     timeout: 5000, // 请求超时时间
     headers: {'X-Custom-Header': 'foobar'} // 自定义请求头
   });

3. 使用axios进行请求：
使用`async/await`或`.then()`处理返回结果：
- **async/await**:

     async function fetchData() {
       try {
         const response = await service.get('/api/data');
         console.log(response.data);
       } catch (error) {
         console.error(error);
       }
     }
     fetchData();

- **`.then()`方法**:

     service.get('/api/data')
       .then(response => {
         console.log(response.data);
       })
       .catch(error => {
         console.error(error);
       });

4. Vue的setup()中使用：
如果你使用的是Vue 3的Composition API，可以在`setup()`中使用axios：

   import { ref, onMounted } from 'vue';
   const axios = useAxios();

   const data = ref(null);

   onMounted(async () => {
     try {
       data.value = await axios.get('/api/data');
     } catch (error) {
       console.error(error);
     }
   });

在这里，`useAxios`是一个自定义hook，用于封装axios实例。