Vue2 中封装 Axios 的详细指南

在现代的前端开发中，与后端进行数据交互是必不可少的。Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于欣赏器和 Node.js 情况中。在 Vue.js 项目中，Axios 通常用于发送 HTTP 请求。为了提高代码的可维护性和复用性，我们通常会对 Axios 进行封装。本文将详细先容如何在 Vue2 项目中封装 Axios。
1. 安装 Axios

起首，我们需要在项目中安装 Axios。假如你还没有安装 Axios，可以通过 npm 或 yarn 进行安装：

1. npm install axios

复制代码

大概

1. yarn add axios

复制代码

2. 创建 Axios 实例

在 Vue 项目中，我们通常会在 src 目录下创建一个 api 文件夹，用于存放与 API 干系的代码。在这个文件夹中，我们可以创建一个 axios.js 文件，用于设置 Axios 实例。

1. // src/api/axios.js
3. import axios from 'axios';
5. // 创建 Axios 实例
6. const service = axios.create({
7.   baseURL: process.env.VUE_APP_BASE_API, // 设置 API 的基础 URL
8.   timeout: 5000, // 请求超时时间
9. });
11. // 请求拦截器
12. service.interceptors.request.use(
13.   config => {
14.     // 在发送请求之前做些什么
15.     // 例如：添加 token
16.     const token = localStorage.getItem('token');
17.     if (token) {
18.       config.headers['Authorization'] = `Bearer ${token}`;
19.     }
20.     return config;
21.   },
22.   error => {
23.     // 对请求错误做些什么
24.     return Promise.reject(error);
25.   }
26. );
28. // 响应拦截器
29. service.interceptors.response.use(
30.   response => {
31.     // 对响应数据做些什么
32.     return response.data;
33.   },
34.   error => {
35.     // 对响应错误做些什么
36.     if (error.response) {
37.       // 根据不同的状态码进行不同的处理
38.       switch (error.response.status) {
39.         case 401:
40.           // 未授权，跳转到登录页面
41.           router.push('/login');
42.           break;
43.         case 404:
44.           // 资源未找到
45.           console.error('请求的资源不存在');
46.           break;
47.         default:
48.           console.error('请求失败', error.response.data);
49.       }
50.     } else if (error.request) {
51.       // 请求已发出，但没有收到响应
52.       console.error('请求超时或网络错误', error.request);
53.     } else {
54.       // 其他错误
55.       console.error('请求配置错误', error.message);
56.     }
57.     return Promise.reject(error);
58.   }
59. );
61. export default service;

复制代码

2.1 设置底子 URL

在 axios.create 方法中，我们设置了 baseURL，这是所有请求的底子 URL。通常，我们会将这个值放在项目标 .env 文件中，以便在不同的情况中使用不同的 API 地址。

1. # .env.development
2. VUE_APP_BASE_API=http://localhost:3000/api
4. # .env.production
5. VUE_APP_BASE_API=https://api.example.com/api

复制代码

2.2 请求拦截器

请求拦截器允许我们在请求发送之前对请求进行一些处置惩罚。例如，我们可以在请求头中添加 Authorization 字段，以便在请求中携带 token。
2.3 相应拦截器

相应拦截器允许我们在汲取到相应之后对相应进行一些处置惩罚。例如，我们可以直接返回相应的 data 字段，而不是整个相应对象。此外，我们还可以根据不同的状态码进行不同的处置惩罚，例如在未授权时跳转到登录页面。
3. 封装 API 请求

在 api 文件夹中，我们可以创建一个 user.js 文件，用于封装与用户干系的 API 请求。

1. // src/api/user.js
3. import service from './axios';
5. // 获取用户信息
6. export function getUserInfo(userId) {
7.   return service.get(`/users/${userId}`);
8. }
10. // 更新用户信息
11. export function updateUserInfo(userId, data) {
12.   return service.put(`/users/${userId}`, data);
13. }
15. // 删除用户
16. export function deleteUser(userId) {
17.   return service.delete(`/users/${userId}`);
18. }

复制代码

在这个文件中，我们封装了三个与用户干系的 API 请求：获取用户信息、更新用户信息和删除用户。每个函数都返回一个 Promise，因此我们可以在 Vue 组件中使用 async/await 来处置惩罚这些请求。
4. 在 Vue 组件中使用封装的 API

现在，我们可以在 Vue 组件中使用封装的 API 请求了。例如，在一个用户详情页面中，我们可以使用 getUserInfo 函数来获取用户信息。

1. <template>
2.   <div>
3.     <h1>用户详情</h1>
4.     <p>用户名: {{ user.name }}</p>
5.     <p>邮箱: {{ user.email }}</p>
6.     <button @click="updateUser">更新用户信息</button>
7.     <button @click="deleteUser">删除用户</button>
8.   </div>
9. </template>
11. <script>
12. import { getUserInfo, updateUserInfo, deleteUser } from '@/api/user';
14. export default {
15.   data() {
16.     return {
17.       user: {},
18.     };
19.   },
20.   async created() {
21.     // 获取用户信息
22.     const userId = this.$route.params.id;
23.     this.user = await getUserInfo(userId);
24.   },
25.   methods: {
26.     async updateUser() {
27.       const userId = this.$route.params.id;
28.       const updatedData = {
29.         name: 'New Name',
30.         email: 'newemail@example.com',
31.       };
32.       await updateUserInfo(userId, updatedData);
33.       this.user = await getUserInfo(userId);
34.     },
35.     async deleteUser() {
36.       const userId = this.$route.params.id;
37.       await deleteUser(userId);
38.       this.$router.push('/users');
39.     },
40.   },
41. };
42. </script>

复制代码

在这个组件中，我们在 created 生命周期钩子中调用 getUserInfo 函数来获取用户信息，并在 updateUser 和 deleteUser 方法中分别调用 updateUserInfo 和 deleteUser 函数来更新和删除用户。
5. 处置惩罚全局错误

在实际项目中，我们可能需要在全局范围内处置惩罚某些错误，例如网络错误或服务器错误。我们可以在 Vue 实例中添加一个全局的错误处置惩罚函数。

1. // src/main.js
3. import Vue from 'vue';
4. import App from './App.vue';
5. import router from './router';
6. import store from './store';
7. import service from './api/axios';
9. Vue.config.productionTip = false;
11. // 全局错误处理
12. Vue.prototype.$handleError = function (error) {
13.   if (error.response) {
14.     // 根据不同的状态码进行不同的处理
15.     switch (error.response.status) {
16.       case 401:
17.         // 未授权，跳转到登录页面
18.         router.push('/login');
19.         break;
20.       case 404:
21.         // 资源未找到
22.         console.error('请求的资源不存在');
23.         break;
24.       default:
25.         console.error('请求失败', error.response.data);
26.     }
27.   } else if (error.request) {
28.     // 请求已发出，但没有收到响应
29.     console.error('请求超时或网络错误', error.request);
30.   } else {
31.     // 其他错误
32.     console.error('请求配置错误', error.message);
33.   }
34. };
36. new Vue({
37.   router,
38.   store,
39.   render: h => h(App),
40. }).$mount('#app');

复制代码

然后，我们可以在组件中使用 $handleError 方法来处置惩罚错误。

1. methods: {
2.   async updateUser() {
3.     const userId = this.$route.params.id;
4.     const updatedData = {
5.       name: 'New Name',
6.       email: 'newemail@example.com',
7.     };
8.     try {
9.       await updateUserInfo(userId, updatedData);
10.       this.user = await getUserInfo(userId);
11.     } catch (error) {
12.       this.$handleError(error);
13.     }
14.   },
15.   async deleteUser() {
16.     const userId = this.$route.params.id;
17.     try {
18.       await deleteUser(userId);
19.       this.$router.push('/users');
20.     } catch (error) {
21.       this.$handleError(error);
22.     }
23.   },
24. },

复制代码

6. 总结

通过封装 Axios，我们可以在 Vue2 项目中更好地管理 API 请求，提高代码的可维护性和复用性。我们创建了一个 Axios 实例，并设置了请求和相应拦截器，以便在请求发送和相应汲取时进行一些处置惩罚。然后，我们封装了与用户干系的 API 请求，并在 Vue 组件中使用这些封装的 API。最后，我们还添加了一个全局错误处置惩罚函数，以便在全局范围内处置惩罚某些错误。
通过这些步骤，我们可以更好地组织和管理 Vue2 项目中的 API 请求，使代码更加清晰和易于维护。

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