XMLHttpRequest VS. Fetch, 谁才是 2019 最适合的 AJAX 技术?

XHR VS. Fetch, 谁才是最适合的 AJAX 技术?

原  作  者:Craig Buckler

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

注:本文是一篇译文。


XMLHttpRequest 最初是由 1999 年发布的 IE5.0 ActiveX 组件实现的,到目前为止(2019 年),刚好 20 年。

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

直到 2006 年 XMLHttpRequest 才成为 Web 标准,但在此之前已经非常多的浏览器将其实现了。由于这项技术在 Gmail 和 Google Maps 中的广泛使用,并且 Jesse James Garrett 在 2005 年发表了一篇文章:AJAX: A New Approach to Web Applications。使得这个新术语吸引了开发人员的大量关注。

从 AJAX 到 Ajax

AJAX 是 Asynchronous JavaScript and XML 的简称。“Asynchronous” 一词,理解起来很简单就是 “异步” 的意思,但是有如下 2 点,需要注意一下:

  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 APIXMLHttpRequest的现代替代方案。通用的HeaderRequestResponse接口提供了一致性,同时 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 Found500 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()决定 fetchtimeout 何时首先完成,例如:

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 polyfillPromise polyfill结合使用,以便在 IE 中执行 Fetch 代码。

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

Fetch 的未来可期。但是,该 API 是相对较新,它不提供所有 XHR 的功能,并且某些参数设置比较繁琐。因此在以后的使用过程中,请注意上述问题。

关注我

大家好,这里是 FEHub,每天早上 9 点更新,为你分享优质精选文章,与你一起进步。

如果喜欢这篇文章,希望大家点赞,评论,转发。你的支持,是我最大的动力,咱们明天见 😃

长按关注 「FEHub」,每天进步一点点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值