????????在?Vue 3?的項目開發(fā)中，使用?Axios?進(jìn)行?HTTP?請求是非常常見的作法，為了更方便開發(fā)者更高效的進(jìn)行代碼編寫和項目的維護(hù)，可以通過再次封裝?Axios?來實現(xiàn)。

? ? ? ? 在本文中，博主將詳細(xì)指導(dǎo)你如何在自己的?Vue 3?項目中使用?Axios?二次封裝?request?請求。

1.安裝 Axios

? ? ? ? 首先，確保我們的?Vue 3?項目已經(jīng)安裝了?Axios 。

如果尚未安裝 Axios?，則可以定位到項目根目錄下 (與src目錄同級) ，運(yùn)行命令行：

# 使用 npm 包管理器
npm install axios# 使用 yarn 包管理器
npm add axios# 使用 pnpm 包管理器
pnpm install axios

? ? ? ? ?隨后，我們查看?package.json?配置文件中是否包含了?Axios?的配置信息：

?2.創(chuàng)建請求封裝模塊

? ? ? ? 在項目中創(chuàng)建一個單獨(dú)的模塊用來封裝?Axios?請求。(博主這里是 src/utils/request.ts)

第一步：創(chuàng)建一個新的 Axios 實例

/* request.ts  這里博主用的是 TypeScript */// 引入 Axios 庫的功能，AxiosInstance 是 Axios 中自帶的接口類型
import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';      // 按需引入 Element-Plus 組件// 第一步：創(chuàng)建一個新的 Axios 實例
const service: AxiosInstance = axios.create({// 這里博主直接引用了開發(fā)環(huán)境配置文件中的路徑, 也可自定義成網(wǎng)絡(luò)地址baseURL: import.meta.env.VITE_API_URL,  // 或 http://${host}:${port}timeout: 5000,  // 設(shè)置請求超時，一般來說為 5 秒// 設(shè)置請求頭類型：若非文件傳輸，一般情況下為 jsonheaders: { 'Content-Type': 'application/json' },  // 傳輸文件: multipart/form-data/* 自定義 Axios 的參數(shù)序列化過程* paramsSerializer 是 Axios 中的一個配置項，用于定義在發(fā)送 GET 請求時如何序列化 URL 參數(shù)* serialize 是一個自定義的方法，它接收一個 params 對象作為參數(shù)，并返回一個字符串* 在這里，它使用了 qs（可能是 querystring 庫）來將參數(shù)對象 params 序列化為一個 URL 查詢字符串* 這里的 qs.stringify 函數(shù)是一個用于序列化對象為 URL 查詢字符串的方法*/paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });}}
})

第二步：創(chuàng)建請求攔截器

// request.ts 文件中/** 已經(jīng)完成了第一步*/// 第二步：創(chuàng)建請求攔截器
service.interceptors.request.use((config) => {// 這里可以在我們發(fā)送 request 網(wǎng)絡(luò)請求前，為我們的 request 請求做一些配置// 例如：將 token 攜帶在請求頭中config.headers!['Authorization'] = `Token ${Session.get('token')}`;return config},(error) => {// 錯誤調(diào)試return Promise.reject(error)}
)

?第三步：創(chuàng)建響應(yīng)攔截器

/* request.ts 文件中 *//** 已完成第一步** 已完成第二步*/// 第三步：創(chuàng)建請求攔截器
service.interceptors.response.use((response) => {// 在這里，你可以對從后端拿到的數(shù)據(jù)進(jìn)行處理const res = response.data;if (res.code === 400 || res.code === 401 || res.code === 403) {// 如果沒有權(quán)限，可以清除瀏覽器中緩存的 session 信息Session.clear(); // 清除瀏覽器全部臨時緩存window.location.href = '/'; // 去登錄頁ElMessageBox.alert('你已被登出，請重新登錄', '提示', {}).then(() => { }).catch(() => { });return Promise.reject(service.interceptors.response);} else {return res;}},(error) => {// 對響應(yīng)錯誤做點(diǎn)什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('網(wǎng)絡(luò)超時');} else if (error.message == 'Network Error') {ElMessage.error('網(wǎng)絡(luò)連接錯誤');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路徑找不到');}return Promise.reject(error);}
)

?第四步：導(dǎo)出 Axios 實例

/* request.ts 文件中 *//** 已完成了上述三個步驟*/// 導(dǎo)出 axios 實例
export default service;

完整代碼如下：

import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import qs from 'qs';// 配置新建一個 axios 實例
const service: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { 'Content-Type': 'multipart/form-data' },paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });},},
});// 添加請求攔截器
service.interceptors.request.use((config) => {// 在發(fā)送請求之前做些什么 tokenif (Session.get('token')) {config.headers!['Authorization'] = `DavyJonesZ ${Session.get('token')}`;}return config;},(error) => {// 對請求錯誤做些什么return Promise.reject(error);}
);// 添加響應(yīng)攔截器
service.interceptors.response.use((response) => {// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么const res = response.data;if (res.code && res.code !== 0) {// `token` 過期或者賬號已在別處登錄if (res.code === 401 || res.code === 4001) {Session.clear(); // 清除瀏覽器全部臨時緩存window.location.href = '/'; // 去登錄頁ElMessageBox.alert('你已被登出，請重新登錄', '提示', {}).then(() => { }).catch(() => { });return Promise.reject(service.interceptors.response);} else {return res;}} else {return res;}},(error) => {// 對響應(yīng)錯誤做點(diǎn)什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('網(wǎng)絡(luò)超時');} else if (error.message == 'Network Error') {ElMessage.error('網(wǎng)絡(luò)連接錯誤');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路徑找不到');}return Promise.reject(error);}
);// 導(dǎo)出 axios 實例
export default service;

3. 使用

? ? ? ? 完成上述對于?Axios?的二次封裝后，我們就可以在其他地方進(jìn)行調(diào)用了

/* Vue 3 接口工具類：login.ts 文件中 */
import request from '/@/utils/request';// Login Api
export function login(data: object) {return request({url: '/user/login',method: 'POST',data})
}

? ? ? ? 最后，只需要在Vue組件中，引入 login.ts 文件，并調(diào)用其 login 方法，就可以實現(xiàn)與后端接口的通信啦！(大功告成！！！)

?