fetch、axios與Ajax之間關(guān)系

1、axios
底層封裝是XMLHttpRequest對(duì)象，實(shí)現(xiàn)原理跟ajax一樣， 通過(guò)封裝Promise()對(duì)象來(lái)處理結(jié)果
例子如下： 封裝Axios對(duì)象進(jìn)行回調(diào) 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()
})
}
}
2、已經(jīng)封裝好的Axios例子
axios({
method:"get | post",
url:"發(fā)送的地址"，
data:{}

創(chuàng)新互聯(lián)專注于于洪企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。于洪網(wǎng)站建設(shè)公司,為于洪等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

 })

.then(
item=>{}
)
.catch(info=>{})
二、fetch
fetch 是基于ES6語(yǔ)法中Proimse（）對(duì)象編寫，代碼簡(jiǎn)潔少，可以認(rèn)為是Axios替代一種方法,支持
async / await。
1 、fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)，對(duì)400，500都當(dāng)做成功的請(qǐng)求，服務(wù)器返回 400，500 錯(cuò)誤碼時(shí)并不會(huì) reject，只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)，fetch 才會(huì)被 reject。
2 、fetch默認(rèn)不會(huì)帶cookie，需要添加配置項(xiàng)： fetch(url, {credentials: 'include'})
3、fetch不支持abort，不支持超時(shí)控制，使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行，造成了流量的浪費(fèi)
4）fetch沒有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以
try{
let response= awiat fetch(
let data=response.json()
/doSomething/
) catch(){
conosloe.log(err)
}
}
三、ajax
var xhr= new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
consloe.log(xhr.responseText)
}
}
}
xhr.open("post","目標(biāo)響應(yīng)",ture);
//讓Ajax已提交表單的方式，發(fā)起Post的Ajax請(qǐng)求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlncoded");
xhr.send("username"+username+"possword"+possword)
基于juqery的ajax
$.ajax({
url:"", //請(qǐng)求的url地址
dataType:"json", //返回格式為json
async:true,//請(qǐng)求是否異步，默認(rèn)為異步，這也是ajax重要特性
data:{"id":"value"}, //參數(shù)值
type:"POST | GET", //請(qǐng)求方式
beforeSend:function(){
//請(qǐng)求前的處理
},
success:function(req){
//請(qǐng)求成功時(shí)處理
},
complete:function(){
//請(qǐng)求完成的處理
},
error:function(){
//請(qǐng)求出錯(cuò)處理
}
});

本文題目：fetch、axios與Ajax之間關(guān)系
網(wǎng)站網(wǎng)址：http://muchs.cn/article34/jsoise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、軟件開發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)