【译】XMLHttpRequest和Fetch, 谁最适合AJAX？

原文地址：https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/

目录

• 从AJAX到Ajax
• XMLHttpRequest
• Fetch
  • 浏览器支持
  • 默认无Cookie
  • 错误不会被拒绝
  • 不支持超时
  • 停止Fetch
  • 没有Progress
• XMLHttpRequest vs Fetch?

2019年是ajax诞生的20周年。能够说，XMLHttpRequest的第一次实现是在1999年做为IE5.0 ActiveX组件发布。

在此以前，曾经有一些方法能够在不刷新页面的状况下从服务器获取数据，可是他们一般依赖笨拙的技术，例如<script>注入或第三方插件。微软开发了XMLHttpRequest初始版本, 用于替代Outlook基于浏览器的电子邮件客户端。

XMLHttpRequest直到2006年才成为Web标准，但在此以前已在大多数浏览器中被实现。因为它在Gmail和Google Maps中的采用，Jesse James Garrett在2005年发表了一篇文章：AJAX: A New Approach to Web Applications.这个新术语吸引了开发人员的关注。

从AJAX到Ajax

AJAX是Asynchronous JavaScript and XML的简称。"Asynchronous"一词很明显，可是：

1. 虽然VBScript和Flash也能够实现，可是JavaScript更合适
2. 有效负载没必要是XML，尽管在当时很流行。在今天，可使用任何的数据格式，一般JSON是首选。

如今，咱们将“Ajax”用做客户端从服务器获取数据并动态更新DOM,而无需刷新整个页面的通用术语。Ajax是大多数Web应用程序和单页应用程序（SPA）的核心技术。

XMLHttpRequest

如下JavaScript代码展现了如何使用XMLHttpRequest(一般简称为XHR)向http://domain/service发出的HTTP GET请求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain/service');

// request state change event
xhr.onreadystatechange = function() {
  // request completed?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful - show response
    console.log(xhr.responseText);
  } else {
    // request error
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// start request
xhr.send();

XMLHttpRequest对象有许多属性、方法和事件。例如，能够设置和监测以毫秒为单位的超时：

// set timeout
xhr.timeout = 3000; // 3 seconds
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

而且progress事件能够报告长时间运行的文件上传：

// upload progress
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
}

属性的数量可能使人困惑，并且XMLHttpRequest的早期实如今跨浏览器之间也不一致。所以，不少库和框架都提供了Ajax的封装函数，例如jQuery.ajax()方法：

// jQuery Ajax
$.ajax('http://domain/service')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

Fetch

Fetch API是XMLHttpRequest的现代替代方案。通用的Header，Request和Response接口提供了一致性，同时Promises容许更简单的的链式调用和不须要回调的async/await。

fetch(
    'http://domain/service',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

Fetch简洁，优雅，易于理解，而且在PWA Service Worker中大量使用。为何不用它替代古老的XMLHttpRequest呢？

不幸的是，Web开发从未如此明确。Fetch还不是用于Ajax的完美替代品...

浏览器支持

Fetch API在大部分浏览器中获得了很好的支持，可是不支持全部版本的IE。使用2017年以前版本的Chrome，Firefox和Safari的人可能也会遇到问题。这些用户或许只占你用户群的一小部分……也有多是主要客户。因此编码以前，请务必确认兼容性！

此外，与成熟的XHR对象相比，Fetch API较新，而且会接收更多正在进行的更新。这些更新不太可能破坏原始代码，但预计将来几年会进行必定的维护工做。

默认无Cookie

与XMLHttpRequest不一样，Fetch并不会默认发送cookie，所以应用的身份验证可能会失败。能够经过更改第二个参数中传递的初始值来解决此问题，例如：

fetch(
  'http://domain/service',
  {
    method: 'GET',
    credentials: 'same-origin'
  }
)

错误不会被拒绝

使人惊讶的是，HTTP错误（例如404 Page Not Found 或 500 Internal Server Error）不会致使Fetch返回的Promise标记为reject；.catch()也不会被执行。想要精确的判断 fetch是否成功，须要包含 promise resolved 的状况，此时再判断 response.ok是否是为 true。以下：

fetch(
    'http://domain/service', 
    { method: 'GET' }
  )
  .then( response => {
    if(response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

仅当请求没法完成时才触发reject，例如网络故障或请求被阻止。这会使错误捕获更加复杂。

不支持超时

Fetch不支持超时，只要浏览器容许，请求将继续。解决方法是能够将Fetch包装在一个Promise中，例如：

// fetch with a timeout
function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  }
}

或使用Promise.race()决定fetch或timeout什么时候首先完成，例如：

Promise.race([
  fetch('http://url', { method: 'GET' }),
  new Promise(resolve => setTimeout(resolve, 3000))
])
  .then(response => console.log(response))

停止Fetch

经过xhr.abort()很容易结束一个XHR请求，另外也能够经过xhr.onabort函数监测事件解决。

以前一直没法停止一个Fetch请求，可是如今实现了AbortController API的浏览器能够支持它。这将触发一个信号，该信号能够传递给Fetch启动对象：

const controller = new AbortController();

fetch(
  'http://domain/service',
  {
    method: 'GET'
    signal: controller.signal
  })
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('Error:', error) );

Fetch能够经过调用controller.abort()来停止。Promise被标记reject后，会调用.catch()函数。

没有Progress

在撰写本文时，Fetch仍不支持进度事件。所以，不可能显示文件上传或大型表单提交的进度状态。

XMLHttpRequest vs Fetch?

最后，选择仍是看你本身……除非你的应用是要求有上传进度条的IE客户端。你也能够选择将Fetch polyfill与Promise polyfill结合使用，以便在IE中执行Fetch代码。

对于更简单的Ajax调用，XMLHttpRequest是低级别的，更复杂的，而且你须要封装函数。不幸的是，一旦你开始考虑超时，停止调用和错误捕获的复杂性，Fetch也会如此。

Fetch的将来可期。可是，该API是相对较新，它不提供全部XHR的功能，而且某些参数设置比较繁琐。所以在之后的使用过程当中，请注意上述问题。