Vue2 应用开辟必备技能：构建优雅的 Axios 哀求封装模块 ...

媒介

   在 Vue2 项目中，数据哀求是最常见的操纵之一。使用 Axios 是一个非常流行的选择，但为了更方便地管理和维护代码，我们通常必要对哀求进行封装。今天，我将手把手教你如何封装 Axios 哀求，让你的代码更加简便、优雅。
  第一步：安装 Axios

在项目中使用 Axios，必要先安装它。如果你还没有安装 Axios，可以通过以下命令完成：

1. npm install axios

复制代码

安装完成后，你可以在项目中引用它。

---

第二步：创建 Axios 封装模块

在项目目录下，新建一个文件夹 utils，然后创建一个文件 request.js，用于封装 Axios。
在 request.js 文件中，进行如下操纵：
1. 引入 Axios

1. import axios from 'axios';

复制代码

2. 创建 Axios 实例

1. const service = axios.create({
2.   baseURL: 'https://api.example.com', // 基础路径，根据你的接口地址修改
3.   timeout: 5000 // 请求超时时间
4. });

复制代码

3. 哀求拦截器

通过哀求拦截器，可以在发送哀求前做一些处理，好比添加 Token：

1. service.interceptors.request.use(
2.   config => {
3.     // 在这里可以为请求添加自定义头部，比如 Token
4.     const token = localStorage.getItem('token');
5.     if (token) {
6.       config.headers['Authorization'] = `Bearer ${token}`;
7.     }
8.     return config;
9.   },
10.   error => {
11.     // 处理请求错误
12.     console.error('请求错误：', error);
13.     return Promise.reject(error);
14.   }
15. );

复制代码

4. 相应拦截器

通过相应拦截器，可以统一处理接口相应数据或错误信息：

1. service.interceptors.response.use(
2.   response => {
3.     const res = response.data;
4.     // 根据接口文档，处理响应数据
5.     if (res.code !== 200) {
6.       console.error('请求失败：', res.message);
7.       return Promise.reject(new Error(res.message || 'Error'));
8.     } else {
9.       return res;
10.     }
11.   },
12.   error => {
13.     // 处理响应错误
14.     console.error('响应错误：', error);
15.     return Promise.reject(error);
16.   }
17. );

复制代码

5. 导出封装的实例

1. export default service;

复制代码

---

第三步：封装详细接口哀求

接下来，我们可以基于封装的 Axios 实例，创建详细的 API 哀求方法。
在 utils 文件夹下，新建一个文件 api.js，如下编写：

1. import request from './request';
2. // 获取用户信息
3. export function getUserInfo(userId) {
4.   return request({
5.     url: `/user/${userId}`,
6.     method: 'get'
7.   });
8. }
9. // 提交用户数据
10. export function submitUserData(data) {
11.   return request({
12.     url: '/user/submit',
13.     method: 'post',
14.     data
15.   });
16. }

复制代码

---

第四步：在 Vue 组件中使用

如今，我们已经完成了 Axios 的封装，可以在 Vue 组件中直接使用这些 API 方法。
比方：

1. <template>
2.   <div>
3.     <h1>User Info</h1>
4.     <div v-if="user">
5.       <p>Name: {{ user.name }}</p>
6.       <p>Email: {{ user.email }}</p>
7.     </div>
8.   </div>
9. </template>
11. <script>
12. import { getUserInfo } from '@/utils/api';
14. export default {
15.   data() {
16.     return {
17.       user: null
18.     };
19.   },
20.   methods: {
21.     async fetchUserInfo() {
22.       try {
23.         const userId = 1; // 示例用户 ID
24.         const response = await getUserInfo(userId);
25.         this.user = response.data;
26.       } catch (error) {
27.         console.error('获取用户信息失败：', error);
28.       }
29.     }
30.   },
31.   created() {
32.     this.fetchUserInfo();
33.   }
34. };
35. </script>

复制代码

---

总结

   通过封装 Axios，我们可以：
  

• 统一管理哀求的基础设置；
  
• 方便地添加哀求或相应的全局处理逻辑；
  
• 在项目中轻松复用和维护接口哀求。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。