vue3封装axios并且请求后端接口

在Vue3中，封装axios是为了简化API请求的过程，使其更易于管理并提高代码复用性。以下是一个简单的步骤来创建一个封装的axios实例：

1. 首先，安装axios库：

   npm install axios

2. 创建一个名为`axios.js`的文件，用于封装axios实例：

   import axios from 'axios';
   
   // 创建axios实例并配置默认选项
   const service = axios.create({
     baseURL: process.env.VUE_APP_API_URL, // API基础URL，根据实际情况替换
     timeout: 5000, // 请求超时时间
     headers: {
       'Content-Type': 'application/json',
     },
   });

   // 拦截器处理，比如全局错误处理、添加身份验证等
   service.interceptors.request.use(
     config => {
       // 在发送请求之前做些什么，如设置token等
       return config;
     },
     error => Promise.reject(error)
   );

   service.interceptors.response.use(
     response => {
       // 对响应数据进行处理，例如解构JSON
       return response.data;
     },
     error => {
       // 对错误进行处理，例如显示错误信息
       console.error('Error:', error.message);
       Promise.reject(error.response.data || { message: error.message });
     }
   );

   // 导出service供其他组件使用
   export default service;

3. 使用封装好的axios在组件中发送请求：

   <script setup>
   import axios from '@/utils/axios';

   async function fetchData() {
     try {
       const response = await axios.get('/your-endpoint');
       // 处理返回的数据
       console.log(response);
     } catch (error) {
       console.error(error);
     }
   }

   onMounted(() => {
     fetchData();
   });
   </script>