有同學問我:Fetch 和 Ajax 有什麼區別?

語言: CN / TW / HK

江山代有人才出,各領風騷數百年。

前言

Hello,大家好,我是程式設計三昧的作者隱逸王,小小前端一枚。

自昨天發了《還在死磕 Ajax?那可就 out 了!》一文後,收到了一些大家的一些評論,評論都很走心,也很有深度。

說實話,雖然我在儘可能努力地回覆大家的問題,但還是避免不了對其中一些概念理解的模稜兩可的情況,有幸得到同仁們的指點,比如:

image-20210818205631196

感謝各位的不吝賜教,讓我在成長的道路上又前進了幾分。

現在總結一下,評論區涉及到的主要問題如下:

  • Fetch 和 Axios/Ajax 是什麼關係
  • Fetch 真的會取代 Ajax 嗎
  • 有封裝良好的 Fetch 工具庫推薦嗎

為了不辜負大家的熱情,我在這裡試著解釋一下這些問題,如有疏漏,還請海涵!

概念和特性

首先,我們來了解一下 Ajax、Axios 和 Fetch 它們各自的概念。

Ajax

英文全稱為 Asynchronous JavaScript + XML ,翻譯過來就是非同步JavaScript和XML

它是用來描述一種使用現有技術集合的“新”方法的,這裡的“新”方法主要涉及到: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT,以及最重要的 XMLHttpRequest。

當使用結合了這些技術的 AJAX 模型以後, 網頁應用能夠快速地將增量更新呈現在使用者介面上,而不需要過載(重新整理)整個頁面。這使得程式能夠更快地迴應使用者的操作。

Ajax 是一個概念模型,是一個囊括了眾多現有技術的集合,並不具體代指某項技術。

Ajax 最重要的特性就是可以區域性重新整理頁面

Axios

Axios 是一個基於 Promise 網路請求庫,作用於 Node.js 和瀏覽器中。 它是 isomorphic 的(即同一套程式碼可以執行在瀏覽器和 Node.js中)。在服務端它使用原生 Node.js http 模組,而在客戶端則使用 XMLHttpRequest。

這裡我們只關注客戶端的 Axios,它是基於 XHR 進行二次封裝形成的工具庫。

客戶端 Axios 的主要特性有:

  • 從瀏覽器建立 XMLHttpRequests
  • 支援 Promise API
  • 攔截請求和響應
  • 轉換請求和響應資料
  • 取消請求
  • 自動轉換JSON資料
  • 客戶端支援防禦XSRF

Fetch

Fetch 提供了一個獲取資源的介面(包括跨域請求)。

Fetch 是一個現代的概念, 等同於 XMLHttpRequest。它提供了許多與 XMLHttpRequest 相同的功能,但被設計成更具可擴充套件性和高效性

Fetch 的核心在於對 HTTP 介面的抽象,包括 Request、Response、Headers 和 Body,以及用於初始化非同步請求的 global fetch。得益於 JavaScript 實現的這些抽象好的 HTTP 模組,其他介面能夠很方便的使用這些功能。

除此之外,Fetch 還利用到了請求的非同步特性——它是基於 Promise 的。

fetch() 方法必須接受一個引數——資源的路徑。無論請求成功與否,它都返回一個 Promise 物件,resolve 對應請求的 Response。

Fetch 和 Axios/Ajax 的關係

通過上面對三者概念的解釋,我們應該大體清楚它們之間的關係了,我在這裡用圖表示一下:

針對上圖,我解釋一下:

  • Ajax 是一種代表非同步 JavaScript + XML 的模型(技術合集),所以 Fetch 也是 Ajax 的一個子集
  • 在之前,我們常說的 Ajax 預設是指以 XHR 為核心的技術合集,而在有了 Fetch 之後,Ajax 不再單單指 XHR 了,我們將以 XHR 為核心的 Ajax 技術稱作傳統 Ajax
  • Axios 屬於傳統 Ajax(XHR)的子集,因為它是基於 XHR 進行的封裝。

Fetch 真的會取代 Ajax 嗎?

其實這個問題更準確的問法應該是:Fetch 真的會取代傳統 Ajax ( XHR ) 嗎?

要回答這個問題,我們需要清楚以下幾點:

  • 非同步程式設計是 JavaScript 發展的大趨勢,且絕大多數瀏覽器都已支援標準 Promise。
  • Fetch API 是瀏覽器自帶的 API,且它是基於標準 Promise 的。
  • 傳統 Ajax 原生寫法結構比較混亂,不符合關注分離的原則,寫過遠端 XHR 的同學應該深有體會。
  • Axios 是基於 XHR 封裝的 Promise 請求庫,用起來確實方便。

基於以上幾點,我的觀點是Fetch 終會取代傳統 Ajax,但過程可能比較漫長。

雖然目前來看,傳統 Ajax (比如 Axios 之類的)在使用規模上遠遠超過 Fetch,但要知道,這是 XHR 十來年累積下來的效果。

封裝得到的 Axios 在易用性上甩了原生 XHR 十萬八千里,但畢竟是封裝的,和原生的 Fetch 相比較,Axios 在出身上就已略輸一籌,且原生的 API 天然上會支援更多的功能,使用上會更加靈活。

Fetch 工具庫推薦

image-20210818224208100在昨天文章的評論區,有一位同學推薦了一個 Fetch 工具庫,名為 Mande,有興趣的同學可以去看看。

iShot2021-08-18 13.52.18

總結

以上就是針對 Fetch 和 Ajax 問題的一份簡單解釋,希望能夠給大家帶來啟發。

就我個人而言,倒是蠻期待 Fetch 能夠取代傳統 Ajax,技術的發展需要不斷注入活力才行,我還能再幹幾十年,可不希望前端技術裹足不前,那樣該多無聊 !

~

~本文完,感謝閱讀!

~

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

大家好,我是〖程式設計三昧〗的作者 隱逸王,我的公眾號是『程式設計三昧』,歡迎關注,希望大家多多指教!

你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以餘韻相贈!

知識與技能並重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!