fetch、axios 與Ajax之間關係

一、axios
底層封裝是XMLHttpRequest對象，實現原理跟ajax同樣， 經過封裝Promise()對象來處理結果
例子以下： 封裝Axios對象進行回調 get方法
var axios = {
getMethod:function(url){
var xhr = new XMLHttpRequest()
reture Promise((resolve,reject)=>{
xhr.open('GET',url,true)
xhr.onreadstatechange = function(){
if(xhr.readState == 4){
if(xhr.status == 200){
resolve(xhr.responseText)
}
}
}
xhr.send()
})
}
}
二、已經封裝好的Axios例子
axios({
method:"get | post",
url:"發送的地址"，
data:{}

})

.then(
item=>{}
)
.catch(info=>{})
2、fetch
fetch 是基於ES6語法中Proimse（）對象編寫，代碼簡潔少，能夠認爲是Axios替代一種方法,支持
async / await。
1 、fetch只對網絡請求報錯，對400，500都當作成功的請求，服務器返回 400，500 錯誤碼時並不會 reject，只有網絡錯誤這些致使請求不能完成時，fetch 纔會被 reject。
2 、fetch默認不會帶cookie，須要添加配置項： fetch(url, {credentials: 'include'})
三、fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，形成了流量的浪費
4）fetch沒有辦法原生監測請求的進度，而XHR能夠
try{
let response= awiat fetch(
let data=response.json()
/doSomething/
) catch(){
conosloe.log(err)
}
}
3、ajax
var xhr= new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
consloe.log(xhr.responseText)
}
}
}
xhr.open("post","目標響應",ture);
//讓Ajax已提交表單的方式，發起Post的Ajax請求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlncoded");
xhr.send("username"+username+"possword"+possword)
基於juqery的ajax
$.ajax({
url:"", //請求的url地址
dataType:"json", //返回格式爲json
async:true,//請求是否異步，默認爲異步，這也是ajax重要特性
data:{"id":"value"}, //參數值
type:"POST | GET", //請求方式
beforeSend:function(){
//請求前的處理
},
success:function(req){
//請求成功時處理
},
complete:function(){
//請求完成的處理
},
error:function(){
//請求出錯處理
}
});