這些名詞的共同點：都用于發(fā)送網絡請求。
1.Ajax
它的全稱是：Asynchronous JavaScript And XML，翻譯過來就是“異步的 Javascript 和 XML”。
很多小伙伴可能會誤以為 Ajax 是發(fā)請求的一種方式，或者把 XMLHttpRequest 與 Ajax 劃等號，其實這是錯誤和片面的。
正解：
Ajax 是一個技術統稱，是一個概念模型，它囊括了很多技術，并不特指某一技術，它很重要的特性之一就是讓頁面實現局部刷新。
特點：
- 局部刷新頁面，無需重載整個頁面。
簡單來說，Ajax 是一種思想，XMLHttpRequest 只是實現 Ajax 的一種方式。其中 XMLHttpRequest 模塊就是實現 Ajax 的一種很好的方式，這也是很多面試官喜歡讓面試者手撕的代碼之一。
利用 XMLHttpRequest 模塊實現 Ajax。
示例代碼：
<body>
<script>
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
xhr.onreadystatechange = function () {
// 異步回調函數
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.info("響應結果", xhr.response)
}
}
}
xhr.send(null);
}
ajax('https://smallpig.site/api/category/getCategory')
</script>
</body>
復制代碼
輸出結果：
這里利用 XMLHttpRequest 模塊實現了一個最簡單的 get 網絡請求。
注意： 我們使用這種方式實現網絡請求時，如果請求內部又包含請求，以此循環(huán)，就會出現回調地獄，這也是一個詬病，后來才催生了更加優(yōu)雅的請求方式。
2.Fetch
Fetch 是在 ES6 出現的，它使用了 ES6 提出的 promise 對象。它是 XMLHttpRequest 的替代品。
很多小伙伴會把它與 Ajax 作比較，其實這是不對的，我們通常所說的 Ajax 是指使用 XMLHttpRequest 實現的 Ajax，所以真正應該和 XMLHttpRequest 作比較。
正解：
Fetch 是一個 API，它是真實存在的，它是基于 promise 的。
特點：
- 使用 promise，不使用回調函數。
- 采用模塊化設計，比如 rep、res 等對象分散開來，比較友好。
- 通過數據流對象處理數據，可以提高網站性能。
所以這里就和 Ajax 又很大不同了，一個是思想，一個是真實存在的 API，不過它們都是用來給網絡請求服務的，我們一起來看看利用 Fetch 實現網絡請求。
示例代碼：
<body>
<script>
function ajaxFetch(url) {
fetch(url).then(res => res.json()).then(data => {
console.info(data)
})
}
ajaxFetch('https://smallpig.site/api/category/getCategory')
</script>
</body>
復制代碼
輸出結果：
上段代碼利用 Fetch 發(fā)送了一個最簡單的 get 請求，其中最重要的特點之一就是采用了.then 鏈式調用的方式處理結果，這樣不僅利于代碼的可讀，而且也解決了回調地獄的問題。
3.Axios
Axios 是隨著 Vue 的興起而被廣泛使用的，目前來說，絕大多數的 Vue 項目中的網絡請求都是利用 Axios 發(fā)起的。當然它并不是一個思想，或者一個原生 API，它是一個封裝庫。
正解：
Axios 是一個基于 promise 封裝的網絡請求庫，它是基于 XHR 進行二次封裝。
特點：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據
- 客戶端支持防御 XSRF
所以說，Axios 可以說是 XHR 的一個子集，而 XHR 又是 Ajax 的一個子集。既然說它是一個庫，那么我們在使用的時候就需要引入它。
示例代碼：
// 發(fā)送 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
復制代碼
總結
Ajax、Fetch、axios三者之間的關系可以用一張圖來清晰的表示，如圖：
三者做個對比：
| 網絡請求 | 特點 |
|---|---|
| Ajax | 一種技術統稱，主要利用XHR實現網絡請求 |
| Fetch | 具體API，基于promise，實現網絡請求 |
| Axios | 一個封裝庫，基于XHR封裝，較為推薦使用 |
