对于 fetch 和 axios 和 Ajax 区别 ?

1.Ajax

ajax 即“asynchronous javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

用法:

$.ajax({
  tyPE: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function() {},
  error: function() {}
});

优点:

  • 提高了性能和速度:减少了客户端和服务器之间的流量传输,同时减少了双方响应的时间,响应更快,因此提高了性能和速度
  • 交互性好:使用ajax,可以开发更快,更具交互性的web应用程序
  • 异步调用:Ajax对Web服务器进行异步调用。这意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
  • 节省带宽:基于Ajax的应用程序使用较少的服务器带宽,因为无需重新加载完整的页面
  • 底层使用XMLHTTPRequest
  • 拥有开源JavaScript库jqueryprototype,Scriptaculous等。
  • AJAX通过htTP协议进行通信

缺点:

  • 增加了设计和开发的时间
  • 比构建经典Web应用程序更复杂
  • Ajax应用程序中的安全性较低(容易收到CSRF和XSS攻击),因为所有文件都是在客户端下载的
  • 可能出现网络延迟的问题
  • 禁用javascript的浏览器无法使用该应用程序
  • 由于安全限制,只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息,则无法在AJAX中显示。

2. axios

axios 基于promise用于浏览器和node.js的http客户端

用法:

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优点:

  • 从node.js创建http请求
  • 在浏览器中创建XMLHttpRequest
  • 支持Promise API
  • 提供了一些并发请求的接口
  • 支持拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御CSRF/XSRF

3.fetch

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。(然而问题还是有很多)

用法:

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

优点:

  • 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
  • 更好更方便的写法
  • 更加底层,提供的API丰富(request,response)
  • 脱离了XHR,是ES规范里新的实现方式

缺点:

  • fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
  • fetch默认不会带cookie,需要添加配置项
  • fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行,造成了量的浪费
  • fetch没有办法原生监测请求的进度,而XHR可以

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 对于 fetch 和 axios 和 Ajax 区别 ?

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活