异步请求xhr、ajax、axios与fetch的区别比较

why: 为什么会出现不同的方法呢?
what: 这些都是异步请求数据的方法。在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
how:他们都有各自的特点。

1. XMLHttpRequest对象

现代浏览器,最开始与服务器交换数据,都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
它给我们带来了很多好处

  1. 不重新加载页面的情况下更新网页
  2. 在页面已加载后从服务器请求/接收数据
  3. 在后台向服务器发送数据。

但是,它也有一些缺点

  1. 使用起来也比较繁琐,需要设置很多值。
  2. 早期的IE浏览器有自己的实现,这样需要写兼容代码。
if (window.XMLHttpRequest) { // model browser
  xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
  try {
    // TODO 处理响应
    if (xhr.readyState === XMLHttpRequest.DONE) {
      // XMLHttpRequest.DONE 对应值是 4
      // Everything is good, the response was received.
      if (xhr.status === 200) {
        // Perfect!
      } else {
        // There was a problem with the request.
        // For example, the response may hava a 404 (Not Found)
        // or 500 (Internal Server Error) response code.
      }
    } else {
      // Not ready yet
    }
  } catch (e) {
    // 通信错误的事件中(例如服务器宕机)
    alert('Caught Exception: ' + e.description)
  }
}

2. jQuery ajax

为了更快捷的操作DOM,并且规避一些浏览器兼容问题,产生了jQuery。它里面的AJAX请求也兼容了各浏览器,可以有简单易用的方法$.get$.post。简单点说,就是对XMLHttpRequest对象的封装。

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

优点

  1. 对原生XHR的封装,做了兼容处理,简化了使用。
  2. 增加了对JSONP的支持,可以简单处理部分跨域。

缺点

  1. 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
  2. 本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
  3. ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。

3. axios

Axios是一个基于promiseHTTP库,可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装,只不过它是Promise的实现版本,符合最新的ES规范。

axios({
    method: 'post',
    url: '/user/12345',
    data: {
      firstName: 'liu',
      lastName: 'weiqin'
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log(err))

Vue2.0之后,尤雨溪大大推荐大家使用axios来请求数据。
优点

  1. 从浏览器中创建XMLHttpRequests
  2. node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

缺点

  1. 只持现代代浏览器.

4. fetch

Fetch API提供了一个 JavaScript 接口,用于访问和操作HTTP管道的部分,例如请求和响应。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
fetch是低层次的API,代替XHR,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers。但是想要很好的使用fetch,需要做一些封装处理。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

优势:跨域的处理
在配置中,添加mode: ‘no-cors‘就可以跨域了

fetch('/users.json', {
    method: 'post', 
    mode: 'no-cors',
    data: {}
}).then(function() { /* handle response */ });

fetch目前遇到的问题

  1. fetch只对网络请求报错,对400500都当做成功的请求,需要封装去处理
  2. fetch默认不会带cookie,需要添加配置项。
  3. fetch不支持abort,不支持超时控制,使用setTimeoutPromise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。
  4. fetch没有办法原生监测请求的进度,而XHR可以。

请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

-. 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject

-. 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。

参考

  1. MDN-使用Fetch
  2. 看云-axios使用说明
  3. jQuery ajax()
  4. XMLHttpRequest

异步请求xhr、ajax、axios与fetch的区别比较

上一篇:【记录一个问题】libtask无法在android下编译通过


下一篇:【python】正则表达式