前端項目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>