axios与ajax的关系,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:{}ios

})

.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(){

//请求出错处理

}

});ajax