vlambda博客
学习文章列表

ajax,fetch,axios三者之间的区别是什么？

答案解析：

1）AJAX
Ajax即“Asynchronous  javascript and xml”(异步的javascript xml)，是一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个 网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以 在不重新加载整个网页的情况下，对网页的某部分进行 更新。传统的网页（不适用ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下：
 
   
   
 

  
    
    
  
本身使针对MVC编程，不符合前段mvvm的浪潮 
  
    
    
  
基于原生XHR开发，xhr本身的架构不清晰 
  
    
    
  
不符合关注分离（separation of concems）的原则
  
    
    
  
配置和调用方式非常混乱，而且基于事件的异步模型不友好。
 
   
   
 
$.ajax({
    type:'POST',
    url:url,
    data:data,
    dataType:dataType,
    success:function(){},
    error:funtion(){}
})

2)Fetch
fetch号称使ajax的替代品，是在es6出现的，使用了es6中的promise对象。fetch是基于promise设计的。fetchd的代码结构比ajax简单多。fetch不是ajax的进一步封装，而是原生js，没有使用xmlhttprequest对象。
fetch的优点：
 
   
   
 

  
    
    
  
语法简洁，更加语义化
  
    
    
  
基于标准promise实现，支持async/await
  
    
    
  
更加底层，提供的api丰富（request,response）
  
    
    
  
脱离xhr,是es规范里新的实现方式
 
   
   
 
fetch的缺点：
 
   
   
 

  
    
    
  
fetch只对网络请求报错，对400,500都当做成功的请求，服务器 返回400,500错误码是并不会reject,只有网络错误 这些导致请求不能完成时，fetch才会被reject。
  
    
    
  
fetch默认不会带cookie,需要添加配置项：fetch(url，{credentials:'include'})
  
    
    
  
fetch不支持abort,不支持超时控制，使用settimeout及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  
    
    
  
fetch没有办法原生 检测请求的进度，而xhr可以。
 
   
   
 
try{
    let response=await fetch(url);
    let data=response.json();
    console.log(data);
}catch(e){
    consoloe.log("Oops,error",e)
}

3）axios
axios是一种基于promise封装的 http客户端，其特点如下：
 
   
   
 

  
    
    
  
浏览器端发起xmlhttprequests请求
  
    
    
  
node端发起http请求
  
    
    
  
支持promise api
  
    
    
  
监听请求和 返回
  
    
    
  
对请求和返回进行转化
  
    
    
  
取消请求
  
    
    
  
自动转换json数据
  
    
    
  
客户端支持抵御XSRF攻击
 
   
   
 
axios({
    method:'post',
    url:'url',
    data:{
        firstName:"tang",
        lastName:'mei'
    }
})
.then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error)
})

坚持每天花20分钟来学习与思考

不要等到找工作时才狂刷题

提倡每日学习