✅fetch 和 XMLHTTPRequest 有什么区别？

大家好！在从事一个有趣的项目时，我有一个想法来讲述 fetch 和 XMLHTTPRequest 之间的区别。事实上，如果你知道它的创建历史，这个问题听起来很有趣，从某种意义上说，它有点不正确，但你仍然需要了解它，因为，比方说，对于我作为一个开发人员来说，当我处理每天都会遇到各种各样的 API，了解一下会很有用，以免创建不必要的代码。

什么是 XMLHTTPRequest 及其创建简史

在 javascript 中，XMLHttpRequest 对象用于与服务器交互。您可以从 URL 检索数据，而无需刷新整个页面。这使得网页能够仅更新页面的一部分，而不会中断用户正在做的事情。但总的来说，说白了就是一个API。当我们听到这个时，我们立即想起事件循环、异步（代码执行将在一定时间后完成）等概念。例如，使用 XMLHTTPRequest 的代码如下所示：

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

XMLHTTPRequest 本身的创建历史让我们回到了恐龙行走的遥远岁月……好吧，开个玩笑。事实上，这个 API 最初是由 Microsoft 开发的，并在 Microsoft Exchange Server 软件 2000 产品的 Outlook on the Web 组件中引入。

当时，它的名称有所不同 - IXMLHTTPRequest，并且在接口的第一个版本中（如果可以这么说的话）与现在有点不同。也就是说，基数明显保持不变，但25年来明显进行了调整。后来，它被添加到 MSXML 2.0 中，甚至后来于 1999 年 3 月添加到 Internet Explorer 5 中。

然后，Mozilla 程序员基于 IXMLHTTPRequest 开发了自己的 API 版本，然后称为 nsIXMLHttpRequest，并使其可以通过我们喜爱的 XMLHttpRequest 进行访问。所有这些都在 2000 年 12 月添加到 Gecko 0.6 版本中（Gecko 是 FireFox 和许多其他地方使用的浏览器引擎）。当时还没有FireFox这样的东西，因为它的第一个版本于2002年9月发布，被称为Phoenix，然后是FireBird，直到2004年FireFox才被称为FireFox。然后，在这一切之前，出现了 Netscape Navigator，但与 Internet Explorer 的对抗仅此而已 - 那是另一个故事，在本文中没有必要写。后来又增加了对Safari、Opera等浏览器的支持。因此，当人们告诉你这个对象是用来兼容旧浏览器时，那么他们当然是对的，因为这把我们带到了 90 年代末，当时 Web 开发刚刚发展起来。你甚至可以记得互联网泡沫的时间，但是，不可否认，那是早了一点，或者是在那个时候（如果我们使用 Internet Explorer），但无论如何那是那时。

那么有什么区别呢？

所以，回到关于差异的问题，最重要的差异已经隐藏在历史中，因为 XMLHTTPRequest 只是一个旧的但受支持的 API，而 fetch 只是一个新的 API，它取代了它。截至目前，XMLHTTPRequest 2.0 于 2012 年 1 月发布，但最新版本的 1.0 标准于同年 12 月发布。这是该对象的当前标准。但现在想象一下一直写这个的开发人员的表情：

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

而不是这个

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData', true);

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status 



<p>几年前。这是唯一立刻想到的事情。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173164813124292.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="✅What is the difference between fetch and XMLHTTPRequest?"></p>

<p>但是说真的，这里有一个简短的差异列表：</p>

<ol>
<li><p>面向 Promise：Fetch API 使用 Promise，这使得使用异步代码变得更加容易，并允许您使用 .then() 以及 async 和 wait 等方便的结构。</p></li>
<li><p>简化的界面：Fetch API 具有更简单、更直观的语法。例如，要发出请求，您不需要像 XHR 那样创建对象并设置其属性。</p></li>
<li><p>对新功能的支持：Fetch API 支持请求和响应对象等新功能，这些对象提供了处理请求、响应及其转换的便捷方法。</p></li>
<li><p>对流的支持：Fetch API 支持流数据，这使您可以在接收到大量数据时对其进行处理。</p></li>
<li><p>取消请求：虽然 Fetch API 没有内置对取消请求的支持，但您可以使用 abort 控制器来执行此操作，这使得管理请求更加灵活。</p></li>
<li><p>改进的自定义：Fetch API 提供了更多用于配置请求的选项，例如设置标头、缓存模式和其他参数。</p></li>
<li><p>cors 支持：Fetch API 在与 CORS（跨域资源共享）配合使用时提供了更大的灵活性，允许更灵活地配置对来自其他域的资源的请求。</p></li>
<li><p>更好的错误处理：使用 Fetch API 时，您可以更好地处理响应状态，因为请求错误（例如网络不可用）将拒绝承诺，而使用 4xx 或 5xx 代码的成功响应则不会拒绝，需要您自行查看状态码。</p></li>
</ol>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173164813671282.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="✅What is the difference between fetch and XMLHTTPRequest?"><br>
<em>这当然不是我，但这只是一张很酷的照片</em></p><p>当然，还有更多差异，但我不认为现在列出它们有什么意义，因为从所有参数来看，很明显这只是针对现代浏览器要求的旧标准的改进版本。 </p>
<h2>
  
  
  后记
</h2>

<p>一开始我想写一行来说明 fetch 是一个较新的标准，但它太简单而且信息量不大，而事实上那里有很多很酷的东西可以告诉。你可以单独写一篇关于fetch的文章，但是这篇文章没有什么特别的点。但总的来说，在我看来，一切似乎都很好。</p>

<p>非常感谢您阅读这篇文章！</p>
<h2>
  
  
  P.S.
</h2>

<p>顺便说一句，这个项目是HMPL。它是一种小型模板语言，用于从服务器向客户端显示 UI。如果您能给这个项目评分，那就太好了。谢谢！</p>

<p>明星HMPL
</p>


          

            
        

以上是✅fetch 和 XMLHTTPRequest 有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！