從零開始用 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 的二次開發，網上有很多資料，我自己也找了一些比較不錯的，感興趣的可以看看參考資料部分。