前端项目Axios封装Vue3详细教程（附源码）

在这里插入图片描述

一、引言

在前端项目开发中，HTTP请求是不可或缺的一部分。Axios作为一个基于Promise的HTTP客户端，因其易用性和丰富的功能而广受欢迎。在Vue3项目中，合理地封装Axios不仅可以提高开发效率，还可以增强代码的可维护性和可读性。本文将详细介绍如何在Vue3项目中封装Axios，包括请求拦截器中添加加载框、响应拦截器中处理各类状态码等高级功能，并给出详细的教程和可直接使用的代码。

二、Axios安装与基本使用

1. 安装Axios

首先，你需要在Vue3项目中安装Axios。可以使用npm或yarn进行安装：

npm install axios
# 或者
yarn add axios

2. 基本使用

安装完成后，你可以在Vue组件中直接使用Axios发送HTTP请求。例如：

import axios from 'axios';axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

三、Axios封装流程

为了更好地管理HTTP请求，我们需要对Axios进行封装。以下是封装Axios的详细流程：

1. 创建Axios实例

在项目根目录或src目录下创建一个新的文件夹（如utils），并在其中创建一个文件（如request.js），用于创建Axios实例和配置相关参数。

// src/utils/request.js
import axios from 'axios';// 创建Axios实例
const instance = axios.create({baseURL: 'https://api.example.com', // API的基础URLtimeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json'}
});export default instance;

2. 配置请求拦截器

请求拦截器可以在请求发送之前对请求进行一些处理，如添加token、设置请求头等。此外，我们还可以在请求拦截器中添加加载框，以提示用户请求正在进行中。

假设我们使用的是一个简单的加载框组件（如LoadingComponent），它可以通过Vue的全局状态管理（如Vuex）或事件总线来控制显示和隐藏。

// src/utils/request.js (继续添加代码)
import store from '@/store'; // 假设我们有一个Vuex store来管理加载框状态// 请求拦截器
instance.interceptors.request.use(config => {// 从localStorage或Vuex中获取tokenconst token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 显示加载框store.commit('setLoading', true); // 假设我们有一个mutation叫`setLoading`return config;},error => {// 隐藏加载框（请求出错时）store.commit('setLoading', false);return Promise.reject(error);}
);

在这里，我们假设Vuex store中有一个loading状态，用于控制加载框的显示和隐藏。你需要根据自己的项目实际情况来调整这部分代码。

3. 配置响应拦截器

响应拦截器可以在响应返回之后对响应进行一些处理，如统一处理错误、转换响应数据格式等。我们还可以根据响应的状态码来执行不同的操作，如显示错误通知、跳转到登录页面等。

// src/utils/request.js (继续添加代码)
import { Message } from 'element-ui'; // 假设我们使用Element UI来显示通知
import router from '@/router'; // 引入Vue Router// 响应拦截器
instance.interceptors.response.use(response => {// 隐藏加载框store.commit('setLoading', false);// 对响应数据进行处理，如统一格式const res = response.data;if (res.code !== 200) {// 根据不同的状态码执行不同的操作switch (res.code) {case 401:// 未登录或token过期，跳转到登录页面router.push('/login');break;case 403:// 无权限访问Message.error('无权限访问');break;default:// 其他错误Message.error(res.message || '请求出错');}return Promise.reject(new Error(res.message || 'Error'));} else {return res;}},error => {// 隐藏加载框（请求出错时）store.commit('setLoading', false);// 对错误进行处理，如显示通知if (error.response) {switch (error.response.status) {case 401:// 未登录或token过期，跳转到登录页面router.push('/login');break;case 403:// 无权限访问Message.error('无权限访问');break;case 404:// 资源未找到Message.error('资源未找到');break;default:// 其他错误Message.error('请求出错');}} else {Message.error('网络错误');}return Promise.reject(error);}
);

在这里，我们使用了Element UI的Message组件来显示通知，并根据响应的状态码执行了不同的操作。你需要根据自己的项目实际情况来调整这部分代码，比如使用其他的通知库或自定义的错误处理方式。

4. 封装请求方法

为了方便调用，我们可以将常用的HTTP请求方法（如GET、POST、PUT、DELETE等）封装成函数。

// src/utils/request.js (继续添加代码)export function get(url, params = {}) {return instance.get(url, { params });
}export function post(url, data = {}) {return instance.post(url, data);
}export function put(url, data = {}) {return instance.put(url, data);
}export function del(url) {return instance.delete(url);
}

四、在Vue3项目中使用封装后的Axios

1. 引入封装后的Axios

在需要使用Axios的Vue组件中引入封装后的Axios实例和请求方法。

// src/views/Home.vue
<template><div><h1>Home</h1><p>{{ message }}</p></div>
</template><script>
import { get } from '@/utils/request';export default {data() {return {message: ''};},created() {this.fetchData();},methods: {async fetchData() {try {const response = await get('/api/data');this.message = response.data;} catch (error) {console.error(error);}}}
};
</script>

2. 调用请求方法

在组件的方法中调用封装好的请求方法，即可发送HTTP请求并处理响应。由于我们已经在请求拦截器和响应拦截器中处理了加载框和错误通知，因此在组件中无需再额外处理这些逻辑。

五、封装细节与优化

1. 加载框的显示与隐藏

在请求拦截器中显示加载框，在响应拦截器和请求出错时隐藏加载框。这样可以确保加载框在请求进行时显示，并在请求完成后及时隐藏。

2. 错误处理与通知

在响应拦截器中，我们根据响应的状态码执行了不同的操作，如跳转到登录页面、显示错误通知等。这样可以统一处理错误，提高用户体验。

3. 请求方法的封装

将常用的HTTP请求方法封装成函数，方便在组件中调用。这样可以减少重复代码，提高开发效率。

4. 可扩展性

我们的封装方式具有良好的可扩展性。如果未来需要添加新的请求方法或处理新的状态码，只需在request.js文件中进行相应的修改即可。

六、封装流程单与表格

封装流程单

安装Axios：使用npm或yarn安装Axios。
创建Axios实例：在utils文件夹中创建request.js文件，并创建Axios实例。
配置请求拦截器：
- 从localStorage或Vuex中获取token，并添加到请求头中。
- 显示加载框。
配置响应拦截器：
- 隐藏加载框。
配置响应拦截器：
- 根据响应的状态码执行不同的操作，如处理未登录、无权限访问、资源未找到等错误。
- 对响应数据进行统一处理，如格式转换或错误消息提取。
- 隐藏加载框（响应完成或出错时）。
封装请求方法：
- 将常用的HTTP请求方法（GET、POST、PUT、DELETE等）封装成易于调用的函数。
- 提供可选的参数配置，如请求参数或请求体数据。
在Vue组件中使用：
- 在需要发送HTTP请求的Vue组件中引入封装后的Axios实例和请求方法。
- 调用请求方法发送请求，并处理响应数据或错误。

封装细节优化表格

优化点	描述
加载框管理	在请求拦截器中显示加载框，在响应拦截器和错误处理中隐藏加载框，确保用户体验。
错误统一处理	在响应拦截器中根据状态码统一处理错误，如跳转登录、显示通知，减少重复代码。
请求方法封装	封装GET、POST等常用请求方法，简化调用，提高代码可读性和开发效率。
可扩展性	封装设计易于扩展，未来可轻松添加新请求方法或处理新状态码。
配置集中管理	Axios实例的配置（如baseURL、timeout）集中在一处管理，方便修改和维护。
Token自动附加	请求拦截器自动从localStorage或Vuex中获取并附加Token，简化请求头管理。
响应数据统一处理	对响应数据进行统一格式处理或错误消息提取，减少组件中重复处理逻辑。

七、实践案例与代码片段

实践案例

假设我们有一个用户信息管理模块，需要获取用户列表、添加新用户、更新用户信息和删除用户。使用封装后的Axios，我们可以轻松实现这些功能。

获取用户列表

// src/views/UserList.vue
<template><div><h1>User List</h1><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div>
</template><script>
import { get } from '@/utils/request';export default {data() {return {users: []};},created() {this.fetchUsers();},methods: {async fetchUsers() {try {const response = await get('/api/users');this.users = response.data;} catch (error) {console.error('Failed to fetch users:', error);}}}
};
</script>

添加新用户

// src/views/AddUser.vue
<template><div><h1>Add User</h1><form @submit.prevent="addUser"><input v-model="newUser.name" placeholder="Enter user name" required /><button type="submit">Add User</button></form></div>
</template><script>
import { post } from '@/utils/request';export default {data() {return {newUser: {name: ''}};},methods: {async addUser() {try {await post('/api/users', this.newUser);this.$message.success('User added successfully');this.newUser.name = ''; // Reset form} catch (error) {console.error('Failed to add user:', error);this.$message.error('Failed to add user');}}}
};
</script>