省流讀法
ajax是js異步技術的術語，早期相關的api是xhr，它是一個術語。
fetch是es6新增的用于網(wǎng)絡請求標準api，它是一個api。
axios是用于網(wǎng)絡請求的第三方庫，它是一個庫。
1.Ajax
它的全稱是：Asynchronous JavaScript And XML，翻譯過來就是“異步的 Javascript 和 XML”。
很多小伙伴可能會誤以為 Ajax 是發(fā)請求的一種方式，或者把XMLHttpRequest 與 Ajax 劃等號，其實這是錯誤和片面的。
正解：
Ajax 是一個技術統(tǒng)稱，是一個概念模型，它囊括了很多技術，并不特指某一技術，它很重要的特性之一就是讓頁面實現(xiàn)局部刷新。
特點：
局部刷新頁面，無需重載整個頁面。
簡單來說，Ajax 是一種思想，XMLHttpRequest 只是實現(xiàn) Ajax 的一種方式。其中 XMLHttpRequest 模塊就是實現(xiàn) Ajax 的一種很好的方式，這也是很多面試官喜歡讓面試者手撕的代碼之一。
利用 XMLHttpRequest 模塊實現(xiàn) Ajax。
XMLHttpRequest示例代碼
<body>
<script>
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
xhr.onreadystatechange = function () {
// 異步回調函數(shù)
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.info("響應結果", xhr.response)
}
}
}
xhr.send(null);
}
ajax('https://smallpig.site/api/category/getCategory')
</script>
</body>
2.Fetch
Fetch 是在 ES6 出現(xiàn)的，它使用了 ES6 提出的 promise 對象。它是 XMLHttpRequest 的替代品。
很多小伙伴會把它與 Ajax 作比較，其實這是不對的，我們通常所說的 Ajax 是指使用 XMLHttpRequest 實現(xiàn)的 Ajax，所以真正應該和 XMLHttpRequest 作比較。
正解：
Fetch 是一個 API，它是真實存在的，它是基于 promise 的。
特點：
使用 promise，不使用回調函數(shù)。 采用模塊化設計，比如 rep、res 等對象分散開來，比較友好。
通過數(shù)據(jù)流對象處理數(shù)據(jù)，可以提高網(wǎng)站性能。
所以這里就和 Ajax 又很大不同了，一個是思想，一個是真實存在的 API，不過它們都是用來給網(wǎng)絡請求服務的，我們一起來看看利用 Fetch 實現(xiàn)網(wǎng)絡請求。
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 是用于發(fā)出網(wǎng)絡請求的第三方 HTTP 客戶端庫。絕大部分使用基于xhr封裝，截止文章編寫時間也已經(jīng)支持fetch，可以在瀏覽器和 Node.js 中使用。它提供了更高級別的封裝，使發(fā)送請求和處理響應更加簡單和靈活。axios 支持以簡潔的方式設置請求參數(shù)、處理請求和響應攔截器，并提供了更好的錯誤處理和取消請求的支持。
正解：
Axios 是用于發(fā)出網(wǎng)絡請求的第三方 HTTP 客戶端庫。
特點：
使用 Promise 對象來處理異步請求的結果，可以更加方便地進行鏈式調用和錯誤處理。
axios示例代碼
axios.get('https://api.example.com/data')
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
總結
ajax是js異步技術的術語，早期相關的api是xhr，它是一個術語。
fetch是es6新增的用于網(wǎng)絡請求標準api，它是一個api。
axios是用于網(wǎng)絡請求的第三方庫，它是一個庫。文章來源：http://www.zghlxwxcb.cn/news/detail-723420.html
易混淆點以及注意點文章來源地址http://www.zghlxwxcb.cn/news/detail-723420.html
- xhr是ajax的一種實現(xiàn)
- fetch應該和xhr作比較，不能和ajax和axios做比較
- axios和fetch都基于promise
- fetch使用了關注分離的設計思想（請求和響應結果分開處理）
- axios目前也支持fetch
到了這里，關于【學一點兒前端】ajax、axios和fetch的概念、區(qū)別和易混淆點的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
