Fetch API 与 XMLHttpRequest



XMLHttpRequest 对象用于异步地与服务器通信,这意味着我们可以在后台与服务器交换数据,而无需刷新整个页面。XMLHttpRequest 是最常用的技术,因此大多数主流浏览器(如 Google Chrome、Safari、Mozilla Firefox 或 Opera)都使用它。它还支持纯文本、JSON 数据和许多其他数据格式。它非常易于使用,并提供各种方法和属性来执行操作。我们可以使用 `XMLHttpRequest()` 构造函数创建一个 XMLHttpRequest 对象。

语法

variableName = new XMLHttpRequest()

使用 `new` 关键字和 `XMLHttpRequest()` 构造函数,我们可以创建一个新的 XMLHttpRequest 对象。必须在调用 `open()` 函数初始化它之前创建此对象,然后才能调用 `send()` 函数将请求发送到 Web 服务器。

Fetch API 提供了一个用于从服务器获取/检索资源的接口。它是 XMLHttpRequest 的现代替代方案。由于它支持请求和响应的通用定义,因此如果将来需要用于缓存 API、Service Worker、处理或修改请求和响应等,我们可以访问它们。它非常简单、易用且一致。或者我们可以说,与 XMLHttpRequest 相比,它提供了一种现代且灵活的方法来创建 HTTP 请求和处理响应。它基于 Promise API,提供了清晰的语法和更好的错误处理。

语法

fetch(res)

其中 `fetch()` 接受一个必选参数 `res`。`res` 参数定义要获取的资源,它可以是字符串、任何其他对象或请求对象。除了必选参数外,它还可以接受一个可选参数,例如方法、头部信息、主体、模式缓存、同源等。

Fetch API 与 XMLHttpRequest

以下是 Fetch API 和 XMLHttpRequest 之间的区别:

区别 Fetch API XMLHttpRequest

语法

众所周知,Fetch API 是基于 Promise 的 API,因此它提供了更清晰的语法和更好的错误处理方法。

XHR 基于回调方法,其语法不如 Fetch API 好。

跨源资源共享 (CORS)

Fetch API 可以很好地处理 CORS 请求,无需任何额外配置。

XMLHttpRequest 需要特殊的配置才能处理或发出跨域请求。

请求和响应头部信息

Fetch API 提供了更灵活的方式来处理请求和响应头部信息。

XMLHttpRequest 提供了有限数量的方法来处理请求和响应头部信息。

流和解析

Fetch API 对流和解析大型响应提供了良好的支持,因此它可以提高性能并减少内存使用。

XMLHttpRequest 需要自定义程序才能获得此功能。

浏览器兼容性

Fetch API 比较新,因此可能不被旧版浏览器支持。

XMLHttpRequest 已经使用了多年,因此几乎所有浏览器都支持它。

Cookie 和凭据控制

Fetch API 对 Cookie 和凭据提供了良好的控制,因此与 XMLHttpRequest 相比,我们可以轻松地进行身份验证和授权。

XMLHttpRequest 对 Cookie 和凭据的支持较少。

超时

Fetch API 不支持超时,因此请求将持续到浏览器选择请求为止。

XMLHttpRequest 支持超时。

结论

这些是 Fetch API 和 XMLHttpRequest 之间的主要区别。与 XMLHttpRequest 相比,Fetch API 更强大且更容易理解。它也受所有现代浏览器支持,但 XMLHttpRequest 仅受旧版浏览器支持。在下一篇文章中,我们将学习 `fetch()` 函数。

广告