Vue3 Ajax(axios)请求

Vue3 中，我们可以使用 Axios 库方便地进行Ajax请求，因为Axios是一个流行的基于Promise的HTTP库，它在浏览器和Node.js环境中都工作得很好，并且非常适合于单页面应用（SPA）。以下是使用Axios进行请求的基本步骤：

1. **安装Axios**：首先，在项目中安装 Axios，可以使用 npm 或 yarn 进行安装：

   npm install axios
   # 或者
   yarn add axios

2. **引入并配置Axios**：在Vue组件或者整个应用的入口处，导入Axios并进行配置（如设置基础URL、拦截器等）：

   import axios from 'axios';
   
   // 创建axios实例
   const service = axios.create({
     baseURL: process.env.VUE_APP_API_URL, // api 的 base URL
     timeout: 5000, // 请求超时时间
     headers: {'X-Custom-Header': 'foobar'} // 自定义请求头
   });
   
   // 您还可以在这里添加全局响应拦截器和错误处理
   service.interceptors.request.use(
     config => {
       // 在发送请求之前做些什么
       return config;
     },
     error => Promise.reject(error)
   );
   
   service.interceptors.response.use(
     response => response.data,
     error => {
       // 对响应错误做些什么
       console.error('Error:', error);
       return Promise.reject(error.message || error);
     }
   );

3. **发起请求**：在需要的地方调用`service`对象的方法发送GET、POST等请求，例如：

   async function fetchData() {
     try {
       const response = await service.get('/users');
       console.log(response.data); // 打印获取到的数据
     } catch (error) {
       console.error(error);
     }
   }

   fetchData();