從零開始用 Axios 請求后端接口
對于前端同學來說，請求后端接口是一個非常通用的東西。在十幾年前的時候，我們還用 Ajax 去請求后端接口。但在 2023 年的今天，很多框架都很成熟了，我們有了更加快捷的方式 —— Axios 框架。
請求框架哪家強？
對于使用 Vue 技術棧的同學來說，其實接口請求框架就三種：vue-resource、Axios、fetch。對于 vue-resource 和 Axios 來說，它們都是用于在 vue.js 應用中進行 HTTP 請求的工具，但它們有一些區別，下面是一些主要的區別和如何選擇的考慮因素：
-
維護狀態：
- Vue-resource： Vue-resource 是由 Vue.js 團隊開發和維護的，但在Vue 2.0版本后，官方不再推薦使用 Vue-resource，而是推薦使用 Axios 或原生的 fetch。
- Axios： Axios 是一個獨立的第三方庫，由一個開發者維護，它在Vue社區和其他前端框架中都廣受歡迎。
-
功能和特性：
- Vue-resource： Vue-resource 提供了一些與Vue.js集成的特性，如攔截器、Vue組件的資源請求和響應處理等。然而，它的功能相對較少，可能在處理復雜的HTTP場景時不夠靈活。
- Axios： Axios 提供了更豐富的功能，支持攔截器、并發請求、取消請求、全局默認配置等特性。它也更靈活，可以輕松地與各種前端框架和工具集成。
-
API 設計：
- Vue-resource： Vue-resource 的API設計比較簡單，適合小型項目或初學者使用。
- Axios： Axios 的API設計更為靈活，對于復雜的HTTP請求場景提供了更多的選項和配置，適用于大型和復雜的前端項目。
-
支持度：
- Vue-resource： 在Vue 2.0版本后，官方不再推薦使用 Vue-resource，因此未來可能不會有太多更新和維護。
- Axios： Axios 是一個獨立的、活躍維護的項目，得到了廣泛的支持，有更多社區貢獻和更新。
基于以上考慮，一般而言，推薦使用 Axios，因為它更靈活、功能更強大，并且得到了更廣泛的社區支持。 如果你的項目已經在使用 Vue-resource，可能需要考慮遷移到 Axios 或其他更為主流的HTTP庫。如果項目較小或是初學者，Vue-resource 也可以滿足基本需求。
快速入門
使用 Axios 非常簡單，首先需要運行如下代碼來安裝 Axios 依賴。
npm install axios
隨后，我們就可以直接使用 Axios 了，如下代碼所示。
import axios from "axios";
axios
.get("/api/data/winTogether/service")
.then(response => {
console.log("request..");
this.service = response.data.service;
})
.catch(error => {
console.log("fail....");
});
如上代碼所示，直接引入 axios，隨后使用 axios 對象的 get 方法便可發起一個請求。
搭配 Mock.js
很多時候，我們沒有對應的后臺接口，這時候我們需要自己 Mock 數據，那么我們可以使用 Mock.js 來模擬返回數據。
使用 Mock.js 也很簡單，首先安裝對應的依賴。
npm install mockjs
隨后，我們引入 Mock 對象，并使用 mock() 方法便可模擬返回特定數據，如下代碼所示。
import Mock from "mockjs";
// 注意這里的 url 需要與請求的接口保持一致
Mock.mock("/api/data/winTogether/service", {
service: [
{
subtitle: "xxxx網格站加盟",
desc: "通過自有或租賃的倉庫進行分揀商品"
}
]
});
二次封裝
當你調用接口比較多的時候，你會發覺 Axios 的使用很繁瑣，有很多重復的操作。這時候，我們可以對 Axios 進行二次封裝，從而來提高我們的開發效率。關于 Axios 的二次開發，網上有很多資料，我自己也找了一些比較不錯的，感興趣的可以看看參考資料部分。
參考資料
浙公網安備 33010602011771號