摘要：Ajax、Axios、Fetch都用于發(fā)送網(wǎng)絡(luò)請求的，那他們有什么區(qū)別呢？1.Ajax 它的全稱是：Asynchronous JavaScript And XML，翻譯過來就是“異步的 Javascript 和 XML”...
Ajax、Axios、Fetch都用于發(fā)送網(wǎng)絡(luò)請求的，那他們有什么區(qū)別呢？
1.Ajax
它的全稱是：Asynchronous JavaScript And XML，翻譯過來就是“異步的 Javascript 和 XML”。很多小伙伴可能會誤以為 Ajax 是發(fā)請求的一種方式，或者把 XMLHttpRequest 與 Ajax 劃等號，其實(shí)這是錯誤和片面的。
正解：
Ajax 是一個技術(shù)統(tǒng)稱，是一個概念模型，它囊括了很多技術(shù)，并不特指某一技術(shù)，它很重要的特性之一就是讓頁面實(shí)現(xiàn)局部刷新。
特點(diǎn)：
局部刷新頁面，無需重載整個頁面。
簡單來說，Ajax 是一種思想，XMLHttpRequest 只是實(shí)現(xiàn) Ajax 的一種方式。其中 XMLHttpRequest 模塊就是實(shí)現(xiàn) Ajax的一種很好的方式，這也是很多面試官喜歡讓面試者手撕的代碼之一。
利用 XMLHttpRequest 模塊實(shí)現(xiàn) Ajax：
<body>
<script>
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
xhr.onreadystatechange = function () {
// 異步回調(diào)函數(shù)
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.info("響應(yīng)結(jié)果", xhr.response)
}
}
}
xhr.send(null);
}
ajax('https://www.yzmcms.com')
</script>
</body>2.Axios
Axios 是隨著 Vue 的興起而被廣泛使用的，目前來說，絕大多數(shù)的 Vue 項(xiàng)目中的網(wǎng)絡(luò)請求都是利用 Axios 發(fā)起的。當(dāng)然它并不是一個思想，或者一個原生 API，它是一個封裝庫。
正解：
Axios 是一個基于 promise 封裝的網(wǎng)絡(luò)請求庫，它是基于 XHR 進(jìn)行二次封裝。
特點(diǎn)：
從瀏覽器中創(chuàng)建 XMLHttpRequests
從 node.js 創(chuàng)建 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請求
自動轉(zhuǎn)換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF
所以說，Axios 可以說是 XHR 的一個子集，而 XHR 又是 Ajax 的一個子集。既然說它是一個庫，那么我們在使用的時(shí)候就需要引入它。
示例代碼：
// 發(fā)送 POST 請求
axios({
method: 'post',
url: 'https://www.yzmcms.com',
data: {
username: 'yzmcms',
password: 'yzmcms'
}
})3.Fetch
Fetch 是在 ES6 出現(xiàn)的，它使用了 ES6 提出的 promise 對象。它是 XMLHttpRequest 的替代品。
很多小伙伴會把它與 Ajax 作比較，其實(shí)這是不對的，我們通常所說的 Ajax 是指使用 XMLHttpRequest 實(shí)現(xiàn)的 Ajax，所以真正應(yīng)該和 XMLHttpRequest 作比較。
正解：
Fetch 是一個 API，它是真實(shí)存在的，它是基于 promise 的。
特點(diǎn)：
使用 promise，不使用回調(diào)函數(shù)。
采用模塊化設(shè)計(jì)，比如 rep、res 等對象分散開來，比較友好。
通過數(shù)據(jù)流對象處理數(shù)據(jù)，可以提高網(wǎng)站性能。
所以這里就和 Ajax 又很大不同了，一個是思想，一個是真實(shí)存在的 API，不過它們都是用來給網(wǎng)絡(luò)請求服務(wù)的，我們一起來看看利用 Fetch 實(shí)現(xiàn)網(wǎng)絡(luò)請求。
示例代碼：
<body>
<script>
function ajaxFetch(url) {
fetch(url).then(res => res.json()).then(data => {
console.info(data)
})
}
ajaxFetch('https://www.yzmcms.com')
</script>
</body>總結(jié)：
Ajax是一種技術(shù)統(tǒng)稱，主要利用XHR實(shí)現(xiàn)網(wǎng)絡(luò)請求，F(xiàn)etch是瀏覽器自帶的 API，基于promise，可實(shí)現(xiàn)網(wǎng)絡(luò)請求，Axios一個封裝庫，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。
