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 的现代替代方案。它支持 Request 和 Response 的通用定义，因此，如果缓存 API、服务工作、处理或修改请求和响应等需要，我们可以在将来访问它们。它非常简单、简单且一致。或者我们可以说，与 XMLHttpRequest 相比，它为创建 HTTP 请求和处理响应提供了一种现代而灵活的方法。它基于 Promise API，提供清晰的语法和更好的错误处理。

语法

 fetch(res)

其中 fetch（） 需要一个强制参数，即 res。res 参数定义您要获取的资源，它可以是字符串或任何其他对象，也可以是请求对象。除了强制参数外，它还可以采用一个可选参数，可以是 method、headers、body、mode cache、same-origin 等。

获取 API VS XMLHttpRequest

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

差异	获取 API	XMLHttp请求
语法	众所周知，Fetch API 是一个基于 Promise 的 API，因此它提供了更清晰的语法和更好的错误处理方法。	XHR 基于回调方法，其语法不如 Fetch API。
跨域资源共享 （CROS）	Fetch API 明智地处理 CROS 请求，无需任何其他配置。	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（） 函数。