XMLHttpRequest和Fetch API，您认为哪种最适合Ajax？

作者：Terry2019.11.22来源：Web前端之家浏览：9038评论:0

关键词：XMLHttpRequest Fetch API Ajax

来台湾出差快一个星期了，相比大陆深圳，还是更喜欢内地多点，这边的天气实在不敢恭维，天天下雨，交通汽车尾气太重了，摩托车四处穿插.....休息时间还是呆在家里，写写东西，给大家分享点干货，今天来聊点数据ajax的基础知识。

2019年3月庆祝Ajax成立20周年。有点。XMLHttpRequest作为IE5.0 ActiveX组件于1999年交付的第一个实现（不要问）。

在此之前，曾经有一些方法可以在不刷新整个页面的情况下从服务器提取数据，但是它们通常依赖于笨拙的技术，例如<script>注入或第三方插件。Microsoft XMLHttpRequest为Outlook电子邮件客户端开发了一种基于浏览器的替代产品。

XMLHttpRequest直到2006年才成为Web标准，但大多数浏览器都实现了该标准。它在Gmail（2004）和Google Maps（2005）中的采用导致Jesse James Garrett在2005年发表的文章AJAX：一种新的Web应用程序方法。新术语明确了开发人员的重点。

AJAX to Ajax

AJAX是异步JavaScript和XML的助记符。绝对是“异步的”，但是：

可以使用JavaScript，尽管可以选择VBScript和Flash

有效负载不必是XML，尽管在当时很流行。可以使用任何数据格式，今天，通常首选JSON。

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

极端XMLHttpRequest

以下JavaScript代码示出了用于一个基本HTTP GET请求http://domain/service使用XMLHttpRequest（通常缩写为XHR）：

let xhr = new XMLHttpRequest();xhr.open('GET', 'http://domain/service');// request state change eventxhr.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 requestxhr.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));

Fast Forward to Fetch

该提取API是一个现代化的替代品XMLHttpRequest。通用的Headers，Request和Response接口提供了一致性，而Promises允许更容易的链接和异步/等待而没有回调。上面的XHR示例可以转换为更简单的基于Fetch的代码，甚至可以解析返回的JSON：

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得到了很好的支持，但是在所有版本的Internet Explorer中都将失败。使用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拒绝；将.catch()永远不会运行。通常，它将response.ok状态设置为false进行解析。

仅当请求无法完成（例如，网络故障）时才发生拒绝。这会使错误捕获的实现更加复杂。

不支持超时

提取不支持超时，只要浏览器选择，请求将继续。需要进一步的代码将Fetch包装在另一个Promise中，例如

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

…或也许Promise.race()首先获取或超时完成时使用哪个解析，例如：

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

Aborting a Fetch

轻松终止XHR请求，xhr.abort()并在必要时使用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) );

可以通过调用中止获取controller.abort();。Promise拒绝，因此.catch()调用该函数。