异步网络请求xhr、ajax、fetch与axios对比

曾经终败给现在 2023-07-04 06:12 3阅读 0赞

现代浏览器，最开始与服务器交换数据，都是通过 `XMLHttpRequest` 对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。

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 {
        // 处理响应
        if (xhr.readyState === 4) {
          // 请求正常
          if (xhr.status === 200) {
            // 处理响应
          } else {
            // 请求遇到一些问题，处理异常
          }
        } else {
          // 还处于未准备好的状态
        }
      } catch (e) {
        // 通信错误的事件中（例如服务器宕机）
        alert('Caught Exception: ' + e.description)
      }
    }

优点：

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

缺点：

*  使用起来也比较繁琐，需要设置很多值。
 *  早期的IE浏览器有自己的实现，这样需要写兼容代码。

### 2. jQuery ajax ###

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

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

优点：

XHR
    JSONP

缺点：

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

### 3. 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` 只对网络请求报错，对 `400` ， `500` 都当做成功的请求，需要封装去处理
 *  `fetch` 默认不会带 `cookie` ，需要添加配置项。
 *  `fetch` 不支持 `abort` ，不支持超时控制，使用 `setTimeout` 及 `Promise.reject` 的实现超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
 *  `fetch` 没有办法原生监测请求的进度，而 `XHR` 可以。

请注意， `fetch` 规范与 `jQuery.ajax()` 主要有三点不同，牢记：

*  当接收到一个代表错误的 HTTP 状态码时，从 `fetch()` 返回的 `Promise` 不会被标记为 `reject` ， 即使该 HTTP 响应的状态码是 `404` 或 `500` 。相反，它会将 `Promise` 状态标记为 `resolve` （但是会将 `resolve` 的返回值的 `ok` 属性设置为 `false` ），仅当网络故障时或请求被阻止时，才会标记为 `reject` 。
 *  `fetch()` 不会接受跨域 `cookies` ；你也不能使用 `fetch()` 建立起跨域会话。其他网站的 `Set-Cookie` 头部字段将会被无视。
 *  `fetch` 不会发送 `cookies` 。除非你使用了 `credentials` 的 初始化选项。（自2017年8月25日以后，默认的 `credentials` 策略变更为 `same-origin` 。Firefox也在61.0b13版本中，对默认值进行修改）

### 4. axios ###

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

这是官方的并发案例:

axios是尤雨溪大神推荐使用的,

优点：

XMLHttpRequests
    node.js
    Promise API
    JSON
    XSRF

缺点：

*  只持现代代浏览器.