江山代有人才出，各領風騷數百年，
前言
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，技術的發展需要不斷注入活力才行，我還能再干幾十年，可不希望前端技術裹足不前，那樣該多無聊 ！
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295198.html
標籤：其他