fetch 和 XMLHTTPRequest 有什么区别？⚙️

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

📖 什么是 XMLHTTPRequest 以及它的简要历史

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

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

它本身的创建历史XMLHTTPRequest就把我们带回到恐龙时代……好吧，开玩笑的。事实上，这个 API 最初是由微软开发的，并在 Microsoft Exchange Server 软件 2000 产品的 Outlook on the Web 组件中引入。

当时，它的名称有所不同——IXMLHTTPRequest如果可以这么说的话，在最初的界面版本中，它与现在略有不同。也就是说，它的基础显然保留了下来，但显然在25年间进行了调整。后来，它被添加到MSXML 2.0中，更晚的是在1999年3月添加到Internet Explorer 5中。

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

👀 那么有什么区别呢？

所以，回到关于差异的问题，最重要的差异已经被历史掩盖了，因为XMLHTTPRequest一个是旧的但受支持的 API，fetch另一个是新的 API，某种程度上是替代它的。截至今天，XMLHTTPRequest 2.0它于 2012 年 1 月发布，但最新版本的 1.0 标准于同年 12 月发布。这是该对象的当前标准。但现在想象一下一直编写这个标准的开发人员的表情：

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();

而不是这个

fetch('/api/getData')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

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

但说实话，以下是一些差异的简短列表：

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

这当然不是我，但这只是一张很酷的照片

当然，还有更多差异，但我认为现在列出它们没有任何意义，因为从所有参数来看，很明显这只是针对现代浏览器要求的旧标准的改进版本。

𓂃🖊 后记

起初我打算写一行代码fetch来表达新标准，但这样太简单，信息量又太小，而实际上有很多很酷的东西可以讲。光是 fetch 就可以写一整篇文章，但这篇文章本身并没有什么特别之处。不过，总的来说，在我看来，一切都还不错。

如果你喜欢这篇文章，可以在开源 HMPL 模板语言项目上点个星，支持作者。谢谢❤️！

💎 明星 HMPL ★

另外，非常感谢您阅读这篇文章！

鏂囩珷鏉ユ簮锛�https://dev.to/hmpljs/what-is-the-difference- Between-fetch-and-xmlhttprequest-1g9m