前言：
????????在現代前端開發中，網絡請求是不可避免的核心功能之一。無論是獲取后端數據、提交表單信息，還是與第三方 API 交互，高效且可靠的 HTTP 請求庫至關重要。axios 作為一款基于 Promise 的 HTTP 客戶端，憑借其簡潔的 API 設計、強大的攔截器機制以及廣泛的瀏覽器和 Node.js 兼容性，成為開發者首選的工具之一。
????????axios 不僅提供了基礎的 GET、POST 等請求方法，還支持請求和響應的攔截、取消請求、自動轉換 JSON 數據等特性，極大簡化了開發流程。然而，在實際項目中直接使用原生 axios 可能會導致代碼冗余、維護困難等問題。通過合理的封裝，可以統一處理錯誤、設置全局配置、管理請求與響應邏輯，從而提升代碼的可讀性和可維護性。
????????本文將詳細介紹 axios 的基本使用方法，并探討如何基于實際業務需求進行二次封裝，使其更符合項目規范，同時兼顧靈活性和擴展性。無論是初學者還是有一定經驗的開發者，都能從中獲得實用的技巧和最佳實踐。
1.axios請求接口
1.下載
npm install axios -S2.引入
import axios from 'axios';3.使用
? ? ? ? axios有兩種使用方式，如下：
1.axios.'請求方式'
比如：axios.get() axios.post2.axios({url:'請求url',method:'請求方式，不給默認get請求',data:'post傳值方式',params:'get傳值方式'
}).then(res => {console.log( res ); // 后端給前端的數據
})? ? ? ? 比如我在優啟夢API上找的免費API接口寫的例子，如下：
<template><div class="app">{{ data }}</div>
</template><script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';const data = ref('')onMounted(() => {axios({url:'https://api.uomg.com/api/rand.qinghua?format=json',method:'get'}).then(res=>{data.value = res.data.content})
})
</script>2.axios的二次封裝
????????axios的二次封裝解決了什么問題：
????????1.請求的url統一管理。
????????2.配置統一的請求頭。
? ? ? ? 說白了axios的二次封裝是為了方便管理和維護，首先我們需要在src目錄下去創建一個工具文件夾（utils），在該文件夾下去創建一個js文件用來封裝axios，命名為resquest.js。
? ? ? ? 創建好之后，第一步就是要引入axios。第二步需要創建axios對象，用來管理統一的url路徑。第三步需要設置請求攔截器，它可以在請求成功前去完成一些操作，比如添加請求頭、設置loading動畫等等。第四步是設置響應攔截器，它是請求完成了，后端返回給前端的數據，可以去處理http狀態碼等等。最后將我們創建的axios對象導出即可。基本代碼如下：
// 1.引入axios
import axios from "axios";// 2.創建axios對象
const service = axios.create({baseURL: 'https://api.uomg.com'
});// 3.設置請求攔截器 請求前進行一些操作 比如添加請求頭、設置loading動畫等
service.interceptors.request.use(config => {return config;
}, err => {Promise.reject(error)
})// 4.設置響應攔截器 后端給前端返回數據 可以處理http狀態碼
service.interceptors.response.use((response) => {if (response.status === 200) {return response.data}},err => {return Promise.reject(new Error(err.response.data))}
)export default service? ? ? ? 封裝好之后，我們就可以對請求代碼進行修改，代碼如下：
<template><div class="app">{{ data }}</div>
</template><script setup>
import { onMounted, ref } from 'vue';
import request from './utils/request';const data = ref('')onMounted(() => {request({// 只需要添加參數url: '/api/rand.qinghua?format=json',}).then(res => {data.value = res.content})
})
</script>3.解偶
? ? ? ? 當項目中可能一個請求會在多個地方用到是，就需要統一管理。
? ? ? ? 在utils文件夾下新建api文件夾的目的在于將接口請求與業務邏輯徹底解耦，實現接口的集中管理和復用。這種架構設計主要解決以下問題：
- 接口復用性：避免同一接口在不同組件重復定義
- 維護便捷性：接口路徑或參數變更時只需修改單個文件
- 語義化調用：通過命名清晰的函數替代原始URL字符串
- 類型提示支持：配合TypeScript可獲得更好的代碼提示
import request from '../request';export function getQingHua(){return request({url: '/api/rand.qinghua?format=json',})
}? ? ? ? 修改原組件代碼為：
<template><div class="app">{{ data }}</div>
</template><script setup>
import { onMounted, ref } from 'vue';
import { getQingHua } from './utils/api/course';const data = ref('')onMounted(() => {getQingHua().then(res => {data.value = res.data})
})
</script>這種架構設計使項目具備以下優勢：
- 接口與業務邏輯完全分離
- 團隊成員協作更規范
- 接口變更影響范圍可控
- 代碼可測試性增強
- 類型系統更完善
結語：
????????axios 作為現代前端開發的核心工具，其靈活性和強大功能為 HTTP 請求處理提供了高效解決方案。通過原生使用和二次封裝，開發者能夠根據項目需求實現從基礎到進階的請求管理。封裝后的代碼不僅提升了可維護性，還通過統一配置和攔截機制增強了健壯性。接口解耦進一步優化了項目結構，使團隊協作更加規范。掌握這些技巧將顯著提升開發效率和代碼質量，為復雜應用奠定堅實基礎。
)