1、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()

})

}

}

2、已經封裝好的Axios例子

axios({

method:"get | post",

url:"發送的地址"，

data:{}

})

.then(

item=>{}

)

.catch(info=>{})

二、fetch

fetch 是基于ES6語法中Proimse()對象編寫，代碼簡潔少，可以認為是Axios替代一種方法,支持

async / await。

1 、fetch只對網絡請求報錯，對400，500都當做成功的請求，服務器返回 400，500 錯誤碼時并不會 reject，只有網絡錯誤這些導致請求不能完成時，fetch 才會被 reject。

2 、fetch默認不會帶cookie，需要添加配置項： fetch(url, {credentials: 'include'})

3、fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制并不能阻止請求過程繼續在后臺運行，造成了流量的浪費

4)fetch沒有辦法原生監測請求的進度，而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","目標響應",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(){

//請求出錯處理

}

});

總結

以上是生活随笔為你收集整理的ajax和cs的关系,fetch、axios 与Ajax之间关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。