來自靈魂的拷問

你知道AJAX、axios、fetch的區(qū)別嗎？

小白回答

AJAX用來請求數(shù)據(jù)的吧，另外axios和fetch是啥？

老鳥回答

AJAX

Gmail開發(fā)人員發(fā)現(xiàn)IE里面有個XMLHTTPRequest對象來請求數(shù)據(jù)時，可以實(shí)現(xiàn)無刷新數(shù)據(jù)請求，所以使用這個特性，進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)請求，這就是AJAX的由來。

AJAX不是一個單詞，他的全稱是Asynchronous JavaScript and XML，就是異步的JavaScript和XML，它是一套用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)標(biāo)準(zhǔn)，使用步驟如下：

創(chuàng)建異步XMLHttpRequest對象

設(shè)置請求參數(shù)，包括請求的方法和URL等

發(fā)送請求

注冊事件，事件狀態(tài)變更會及時響應(yīng)監(jiān)聽

在監(jiān)聽里面獲取并處理返回?cái)?shù)據(jù)

所以AJAX的核心就是XMLHttpRequest對象，這是一個非常早的實(shí)現(xiàn)方法，也是兼容性最好的，已經(jīng)成為了瀏覽器標(biāo)準(zhǔn)，雖然我們現(xiàn)在都使用其它的API規(guī)范，但對象名字暫時還是用XML命名

axios

axios是一個基于Promise的HTTP庫，可以用在瀏覽器和node.js中，它底層還是基于XMLHttpRequest對象的，你可以認(rèn)為它是一個方便的封裝庫，除了基礎(chǔ)請求數(shù)據(jù)，它還增加了如下功能：

對PromiseAPI的支持

支持請求攔截和響應(yīng)、轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)、取消請求

可以自動轉(zhuǎn)換JSON數(shù)據(jù)

支持防御XSRF

fetch

fetch就不是XMLHttpRequest對象了，fetch是原生的js對象，也就是說，它不依賴瀏覽器，fetch提供了一個理解的請求替換方案，可以提供給其它技術(shù)使用。我們主要需要了解下fetch和ajax的本質(zhì)區(qū)別：

fetch返回的是Promise，所以如果HTTP狀態(tài)碼是404之類的，fetch也是成功返回的，只有在網(wǎng)絡(luò)連接錯誤的情況下，才會reject

fetch不發(fā)送cookies

fetch的請求寫法會比AJAX簡單許多，但我想，最主要的問題是，無法區(qū)分HTTP狀態(tài)碼了，這個在編程時還是比較常用的，所以我們目前還是使用axios比較多，而很少使用fetch

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的addeventlistener不支持ajax_十万个Web前端面试题之AJAX、axios、fetch的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。