原生xhr對象
現(xiàn)代瀏覽器，最開始與服務(wù)器交換數(shù)據(jù)垦写，都是通過XMLHttpRequest對象吕世。它可以使用JSON、XML梯投、HTML和text文本等格式發(fā)送和接收數(shù)據(jù)命辖。
好處：
不重新加載頁面的情況下更新網(wǎng)頁
在頁面已加載后從服務(wù)器請求/接收數(shù)據(jù)
在后臺向服務(wù)器發(fā)送數(shù)據(jù)况毅。
缺點：
使用起來也比較繁瑣，需要設(shè)置很多值尔艇。
早期的IE瀏覽器有自己的內(nèi)置對象尔许，這樣需要寫兼容代碼判斷是否為XMLHttpRequest對象。
if (window.XMLHttpRequest) { // model browser
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
try {
// TODO 處理響應(yīng)
if (xhr.readyState === XMLHttpRequest.DONE) {
// XMLHttpRequest.DONE 對應(yīng)值是 4
// Everything is good, the response was received.
if (xhr.status === 200) {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may hava a 404 (Not Found)
// or 500 (Internal Server Error) response code.
}
} else {
// Not ready yet
}
} catch (e) {
// 通信錯誤的事件中（例如服務(wù)器宕機）
alert('Caught Exception: ' + e.description)
}
}
jQuery里的$.ajax
為了方便操作dom并避免一些瀏覽器兼容問題终娃，產(chǎn)生了jquery味廊，
它里面的AJAX請求也兼容了不同的瀏覽器，可以直接使用.get棠耕、.pist余佛。它就是對XMLHttpRequest對象的一層封裝
優(yōu)點：
對原生XHR的封裝，做了兼容處理窍荧，簡化了使用辉巡。
增加了對JSONP的支持，可以簡單處理部分跨域蕊退。
缺點：
如果有多個請求郊楣，并且有依賴關(guān)系的話，容易形成回調(diào)地獄瓤荔。
本身是針對MVC的編程净蚤，不符合現(xiàn)在前端MVVM的浪潮。
ajax是jQuery中的一個方法茉贡。如果只是要使用ajax卻要引入整個jQuery非常的不合理塞栅。
axios
Axios是一個基于promise的HTTP庫，可以用在瀏覽器和 node.js 中腔丧。它本質(zhì)也是對原生XMLHttpRequest的封裝放椰，只不過它是Promise的實現(xiàn)版本，符合最新的ES規(guī)范愉粤。
優(yōu)點：
從瀏覽器中創(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ù)
客戶端支持防止CSPRF
提供了一些并發(fā)請求的接口
缺點：
只持現(xiàn)代代瀏覽器.
axios({
method: 'post',
url: '/userlist/all',
data: {
id: '1',
page:1,
limit: 20
}
})
.then(res => console.log(res))
.catch(err => console.log(err))
fetch
Fetch API提供了一個 JavaScript 接口砾医，用于訪問和操作HTTP管道的部分，例如請求和響應(yīng)衣厘。它還提供了一個全局fetch()方法如蚜，該方法提供了一種簡單，合理的方式來跨網(wǎng)絡(luò)異步獲取資源影暴。
fetch是低層次的API错邦，代替XHR，可以輕松處理各種格式型宙，非文本化格式撬呢。可以很容易的被其他技術(shù)使用妆兑，例如Service Workers魂拦。但是想要很好的使用fetch毛仪，需要做一些封裝處理。
fetch('http://acccess/.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
//在配置中芯勘，添加mode： 'no-cors'就可以跨域了
fetch('/users.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() { /* handle response */ });
優(yōu)點：
語法簡介箱靴，更加語義化
基于標(biāo)準(zhǔn)promise實現(xiàn)，支持async/await
更加底層荷愕，提供的API豐富(request,response)
脫離了XHR衡怀，是Es規(guī)范里新的實現(xiàn)方式
問題：
支隊網(wǎng)絡(luò)請求報錯，也就是說只有網(wǎng)絡(luò)錯誤這些導(dǎo)致請求不能完成時他才會調(diào)用reject路翻，而對400狈癞，500這種錯誤它并不會reject
默認不會帶cookie茄靠，需要添加配置項：fetch(url,{credentials:'include'})
不支持abort茂契，不支持超時控制，使用setTimeout及promise.reject的實現(xiàn)的超時控制不能阻止請求過程繼續(xù)在后臺運行慨绳，會造成流量的浪費
fetch沒辦法原生檢測請求的進度掉冶，XHR可以
1 當(dāng)接收到一個代表錯誤的 HTTP 狀態(tài)碼時，從 fetch()返回的 Promise 不會被標(biāo)記為 reject脐雪， 即使該 HTTP 響應(yīng)的狀態(tài)碼是 404 或 500厌小。相反，它會將 Promise 狀態(tài)標(biāo)記為 resolve （但是會將 resolve的返回值的 ok 屬性設(shè)置為 false ）战秋，僅當(dāng)網(wǎng)絡(luò)故障時或請求被阻止時璧亚，才會標(biāo)記為 reject。
2 認情況下脂信，fetch 不會從服務(wù)端發(fā)送或接收任何 cookies, 如果站點依賴于用戶 session癣蟋，則會導(dǎo)致未經(jīng)認證的請求（要發(fā)送 cookies，必須設(shè)置 credentials 選項）狰闪。
