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、服务工作、处理或修改请求和响应等时访问它们。它非常容易、简单且一致。 或者我们可以说，与 XMLHttpRequest 相比，它提供了一种现代且灵活的方法来创建 HTTP 请求和处理响应。 它基于 Promise API，提供清晰的语法和更好的错误处理。
语法
fetch(res)
其中 fetch() 采用一个强制参数，即 res。 res 参数定义要获取的资源，它可以是字符串或任何其他对象，也可以是请求对象。 除了强制参数外，它还可以采用一个可选参数，可以是方法、标头、正文、模式缓存、同源等。
获取 API 与 XMLHttpRequest
以下是 Fetch API 和 XMLHttpRequest 之间的区别 −
| 差异 | Fetch API | XMLHttpRequest |
|---|---|---|
语法 |
众所周知，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() 函数。
