對于前端同學來說，請求后端接口是一個非常通用的東西。在十幾年前的時候，我們還用 Ajax 去請求后端接口。但在 2023 年的今天，很多框架都很成熟了，我們有了更加快捷的方式 —— Axios 框架。

請求框架哪家強？

對于使用 Vue 技術棧的同學來說，其實接口請求框架就三種：vue-resource、Axios、fetch。對于 vue-resource 和 Axios 來說，它們都是用于在 vue.js 應用中進行 HTTP 請求的工具，但它們有一些區(qū)別，下面是一些主要的區(qū)別和如何選擇的考慮因素：

1. 維護狀態(tài)：

   • Vue-resource： Vue-resource 是由 Vue.js 團隊開發(fā)和維護的，但在Vue 2.0版本后，官方不再推薦使用 Vue-resource，而是推薦使用 Axios 或原生的 fetch。
   • Axios： Axios 是一個獨立的第三方庫，由一個開發(fā)者維護，它在Vue社區(qū)和其他前端框架中都廣受歡迎。

2. 功能和特性：

   • Vue-resource： Vue-resource 提供了一些與Vue.js集成的特性，如攔截器、Vue組件的資源請求和響應處理等。然而，它的功能相對較少，可能在處理復雜的HTTP場景時不夠靈活。
   • Axios： Axios 提供了更豐富的功能，支持攔截器、并發(fā)請求、取消請求、全局默認配置等特性。它也更靈活，可以輕松地與各種前端框架和工具集成。

3. API 設計：

   • Vue-resource： Vue-resource 的API設計比較簡單，適合小型項目或初學者使用。
   • Axios： Axios 的API設計更為靈活，對于復雜的HTTP請求場景提供了更多的選項和配置，適用于大型和復雜的前端項目。

4. 支持度：

   • Vue-resource： 在Vue 2.0版本后，官方不再推薦使用 Vue-resource，因此未來可能不會有太多更新和維護。
   • Axios： Axios 是一個獨立的、活躍維護的項目，得到了廣泛的支持，有更多社區(qū)貢獻和更新。

基于以上考慮，一般而言，推薦使用 Axios，因為它更靈活、功能更強大，并且得到了更廣泛的社區(qū)支持。 如果你的項目已經(jīng)在使用 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 方法便可發(fā)起一個請求。

搭配 Mock.js

很多時候，我們沒有對應的后臺接口，這時候我們需要自己 Mock 數(shù)據(jù)，那么我們可以使用 Mock.js 來模擬返回數(shù)據(jù)。

使用 Mock.js 也很簡單，首先安裝對應的依賴。

npm install mockjs

隨后，我們引入 Mock 對象，并使用 mock() 方法便可模擬返回特定數(shù)據(jù)，如下代碼所示。

import Mock from "mockjs";
// 注意這里的 url 需要與請求的接口保持一致
Mock.mock("/api/data/winTogether/service", {
  service: [
    {
      subtitle: "xxxx網(wǎng)格站加盟",
      desc: "通過自有或租賃的倉庫進行分揀商品"
    }
  ]
});

二次封裝

當你調用接口比較多的時候，你會發(fā)覺 Axios 的使用很繁瑣，有很多重復的操作。這時候，我們可以對 Axios 進行二次封裝，從而來提高我們的開發(fā)效率。關于 Axios 的二次開發(fā)，網(wǎng)上有很多資料，我自己也找了一些比較不錯的，感興趣的可以看看參考資料部分。

參考資料

• Getting Started | Axios Docs
• VIP！這個貌似不錯！！完整的Axios封裝-單獨API管理層、參數(shù)序列化、取消重復請求、Loading、狀態(tài)碼... - 知乎
• 寫得還行，可以參考一下！vue中Axios的封裝和API接口的管理 - 掘金
• VIP！一個極簡的封裝介紹！很易懂！axios簡介及二次封裝 - 掘金
• 這個看著還行，但寫的不是很好懂。先存著。十分鐘封裝一個好用的axios，省時又省力他不香嗎 - 掘金
• 前端架構帶你 封裝axios，一次封裝終身受益「美團后端連連點贊」 - 掘金

總結

以上是生活随笔為你收集整理的从零开始用 Axios 请求后端接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。