XMLHttpRequest 与 Fetch API哪个更适合 Ajax

浅浅的花香味﹌ 2023-10-01 19:02 30阅读 0赞

**权衡是否使用 XMLHttpRequest 与 Fetch 及其对 Ajax 的现代表现？我们比较两种选择的优缺点。**

`XMLHttpRequest`1999 年作为 IE5.0 ActiveX 组件发布的第一个实现。在此之前，有一些方法可以在不刷新整页的情况下从服务器中提取数据，但它们通常依赖于笨拙的技术，例如`<script>`注入或第三方插件。微软`XMLHttpRequest`为他们的 Outlook 电子邮件客户端开发了一个基于浏览器的替代方案。

`XMLHttpRequest`直到 2006 年才成为 Web 标准，但它已在大多数浏览器中实现。它在 Gmail (2004) 和 Google Maps (2005) 中的采用导致了 Jesse James Garrett 的 2005 年文章[AJAX: A New Approach to Web Applications][AJAX_ A New Approach to Web Applications]。新术语明确了开发人员的重点。

### AJAX**到 Ajax** ###

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

1.  JavaScript 是可能的，虽然 VBScript 和 Flash 是选项
2.  有效负载不需要是 XML，尽管这在当时很流行。可以使用任何数据格式，如今，通常首选 JSON。

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

### **极端 XMLHttpRequest** ###

`http://domain/service`以下 JavaScript 代码显示了一个基本的HTTP GET 请求[XMLHttpRequest][]（通常缩写为 XHR）：

该[XMLHttpRequest对象][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]方法：

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

### **快进到**Fetch ###

[Fetch][]`XMLHttpRequest` API是. 通用的[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 Workers][]中大量使用。*为什么不使用它来代替古老的 XMLHttpRequest？*

不幸的是，Web 开发从来没有那么明确。Fetch 还不能完全替代 Ajax 技术……

#### 浏览器支持 ####

Fetch API 得到了[相当好的支持][Link 1]，但在所有版本的 Internet Explorer 中都会失败。使用早于 2017 年的 Chrome、Firefox 和 Safari 版本的用户也可能会遇到问题。这些用户可能只占您用户群的一小部分……或者可能是主要客户。*在开始编码之前务必检查！*

此外，与成熟的 XHR 对象相比，Fetch API 更新并接收更多的持续更改。这些更新不太可能破坏代码，但预计未来几年会进行一些维护工作。

#### 默认无 Cookie ####

与 不同`XMLHttpRequest`的是，并非所有 Fetch 实现都会发送 cookie，因此您的应用程序的身份验证可能会失败。可以通过更改第二个参数中传递的[启动选项][Link 2]来解决问题，例如

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

#### 错误不被拒绝 ####

令人惊讶的是，诸如`404 Page Not Found或500 Internal Server Error`之类的 HTTP 错误不会导致 Fetch Promise 拒绝；`.catch()`永远不会运行。它通常会在`response.ok`状态设置为 false 的情况下解决。

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

#### 不支持超时 ####

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()][Promise.race]当获取或超时首先完成时使用 to which 解决，例如

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

#### 中止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()`调用该函数。

#### 没有进度 ####

在撰写本文时，Fetch 不支持进度事件。因此，不可能报告文件上传或类似的大型表单提交的状态。

### **XMLHttpRequest 与 Fetch API？** ###

最终，选择权在您手中……*除非您的应用程序有需要上传进度条的 IE 客户端*。

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

您可以选择[Fetch polyfill][]和[Promise polyfill][]，这样就可以在 IE 中编写 Fetch 代码。但是，XHR 被用作后备；并非每个选项都会按预期工作，例如无论设置如何都会发送 cookie。

Fetch是未来。但是，API 相对较新，它不提供所有 XHR 功能，而且有些选项很麻烦。在接下来的几年中谨慎使用它。

[AJAX_ A New Approach to Web Applications]: https://adaptivepath.org/ideas/ajax-new-approach-web-applications/
[XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
[jQuery.ajax]: http://api.jquery.com/jquery.ajax/
[Fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[Headers]: https://developer.mozilla.org/en-US/docs/Web/API/Headers
[Request]: https://developer.mozilla.org/en-US/docs/Web/API/Request
[Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
[PWA Service Workers]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
[Link 1]: https://caniuse.com/#search=fetch
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters
[Promise.race]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
[AbortController API]: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
[Fetch polyfill]: https://github.github.io/fetch/
[Promise polyfill]: https://www.npmjs.com/package/promise-polyfill