vue3 axios封装与使用

在Vue3中，使用和封装axios可以通过以下步骤来完成：

1. 首先，在项目的根目录下使用npm命令安装axios和vue-axios：

   npm install --save axios vue-axios

2. 在根目录上新建一个名为`api`的文件夹，并在其中创建`axios.js`和`httpHelper.js`文件。

3. 在`axios.js`文件中，引入axios并创建axios实例：

   import axios from "axios";
   
   const axiosInit = axios.create({
     // 设置超时时间
     timeout: 2000
   });
   
   export default axiosInit;

4. 在`httpHelper.js`文件中，对axios实例进行进一步的封装和配置：

   import axiosInit from "./axios";
   
   // 请求拦截器
   axiosInit.interceptors.request.use(
     (config) => {
       // 在发送请求之前可以在config中做一些处理，例如添加token等
       return config;
     },
     (error) => {
       // 对请求错误进行处理
       return Promise.reject(error);
     }
   );
   
   // 响应拦截器
   axiosInit.interceptors.response.use(
     (response) => {
       // 对响应数据进行处理
       return response;
     },
     (error) => {
       // 对响应错误进行处理
       return Promise.reject(error);
     }
   );
   
   export default axiosInit;

5. 在需要使用axios的地方，引入封装好的`httpHelper.js`文件，并使用axios发送请求：

   import httpHelper from "@/api/httpHelper";
   
   httpHelper.get("/api/users")
     .then((response) => {
       // 处理返回的数据
     })
     .catch((error) => {
       // 处理请求错误
     });

这样，你就可以在Vue3中使用和封装axios了。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [【vue3】 axios封装使用（js/ts）](https://blog.csdn.net/zxsy19966/article/details/127686261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [详解vue中axios的使用与封装](https://download.csdn.net/download/weixin_38714509/12945130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]