江山代有人才出，各領風騷數百年。
前言
Hello，大家好，我是程式設計三昧的作者隱逸王，小小前端一枚。
自昨天發了《還在死磕 Ajax？那可就 out 了！》一文後，收到了一些大家的一些評論，評論都很走心，也很有深度。
說實話，雖然我在儘可能努力地回覆大家的問題，但還是避免不了對其中一些概念理解的模稜兩可的情況，有幸得到同仁們的指點，比如：
感謝各位的不吝賜教，讓我在成長的道路上又前進了幾分。
現在總結一下，評論區涉及到的主要問題如下：
- 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 工具庫推薦
在昨天文章的評論區，有一位同學推薦了一個 Fetch 工具庫，名為 Mande，有興趣的同學可以去看看。
總結
以上就是針對 Fetch 和 Ajax 問題的一份簡單解釋，希望能夠給大家帶來啟發。
就我個人而言，倒是蠻期待 Fetch 能夠取代傳統 Ajax，技術的發展需要不斷注入活力才行，我還能再幹幾十年，可不希望前端技術裹足不前，那樣該多無聊 ！
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
本作品採用《CC 協議》，轉載必須註明作者和本文連結