✅fetch 和 XMLHTTPRequest 有什么区别？-js教程-PHP中文网

大家好！在从事一个有趣的项目时，我有一个想法来讲述 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 组件中引入。

✅What is the difference between fetch and XMLHTTPRequest?

当时，它的名称有所不同 - 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 < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('There was a network error.');
};

xhr.send();

登录后复制

几年前。这是唯一立刻想到的事情。

✅What is the difference between fetch and XMLHTTPRequest?

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

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

✅What is the difference between fetch and XMLHTTPRequest?
这当然不是我，但这只是一张很酷的照片