Fetch API - 基础知识

Fetch 是一个基于 Promise 的 API，它提供了一个 JavaScript 接口来异步访问或操作请求和响应。与使用 Fetch API 的 XMLHttpRequest 相比，它功能更强大，我们可以将数据发送到服务器或异步地从服务器请求数据。它还使用 Request 和 Response 对象以及 CORS 和 HTTP 源标头概念。

以下是 Fetch API 的关键组件 -

fetch（）函数 − 为了获取资源或创建请求，Fetch API 使用名为 fetch（）的全局方法。它返回一个 Promise，该 Promise 进一步解析为 Response 对象。
请求和响应对象 − 请求对象用于表示发送的请求以及 URL、标头等所有信息。而 Response 对象用于表示服务器返回的响应，包括状态代码、正文和响应标头。
Promise − Fetch API 基于 Promise，因为它们异步处理操作和管理响应流。使用 Promise，我们可以创建一个操作链，并且可以使用 .then（）和 .catch（）函数处理成功和错误。
定制 − 使用 Fetch API，我们可以通过指定方法、为请求添加正文、设置标头、处理不同格式的数据等来定制请求。
CROS − Fetch API 为 CROS（Cross-Origin Resource Sharing）提供了良好的支持，允许用户向不同的域发出请求。

Fetch API 的工作

Fetch API 用于从 Web 浏览器中的 Javascript 代码创建 HTTP 请求。因此，使用以下步骤，我们将了解 Fetch API 的工作原理，从发送请求到接受响应 -

以下是上述流程图的分步说明——

第 1 步 - 请求初始化：在客户端，JavaScript 程序使用 fetch（）函数创建请求对象。在这个 fetch（）函数中，我们传递从中获取的资源 URL 和其他可选控件，如 header、method、body 等。

第 2 步 - 发送请求：初始化请求后，Fetch API 使用给定的 URL 将请求发送到服务器。如果请求是 GET 请求，则浏览器会将请求直接发送到服务器。如果请求不是 GET 请求，则浏览器会发送印前 OPTIONS 请求以检查服务器是否允许该请求。

第 3 步 - 服务器处理：收到请求后，服务器处理请求。它可以对请求执行各种操作，例如处理请求、检索数据等。

第 4 步 - 生成响应：现在服务器生成对给定请求的响应。服务器响应通常包含状态代码（例如 200 表示成功，404 表示未找到请求等）、响应标头和可选正文。

第 5 步 - 接收响应：Web 浏览器接收来自服务器的响应。现在 Fetch API 使用 Promise 来解析服务器发送的响应对象。

第 6 步 - 处理响应：Fetch API 使用基于 Promise 的语法来处理服务器返回的响应。使用它，我们可以访问响应状态、正文和标头，并可以对接收到的数据执行操作。

第 7 步 - 解析响应：如果服务器响应包含文本数据，则 JavaScript 程序使用 .json（）、.text（）、.blob（）等内置方法来解析和提取响应中的数据。

第 8 步 - 错误处理：如果服务器返回错误，则错误由 catch（）函数处理。

这些是了解 fetch API 工作流程的基本步骤。这些步骤可能会根据实时使用情况的复杂程度而有所不同。另外，正如我们所知，Fetch API 是异步的，因此在等待服务器响应时它不会阻止其他 Javascript 代码的执行。

优点

以下是 Fetch API 的优点 -

易于使用 − Fetch API 提供简单明了的语法来创建异步请求。
Promise − Fetch API 使用 Promise，因此它可以轻松处理异步操作。Promise 提供了一种精确的方法来轻松处理响应和错误。
现代和浏览器支持 − Fetch API 是现代 Web 标准，它内置在 Web 浏览器中，因此几乎所有现代 Web 浏览器和平台都支持它。与 XMLHttpRequest 相比，这使得 Fetch API 更加一致和可预测。
流式和渐进式加载 − Fetch API 支持流式响应意味着我们可以在响应完全加载之前开始处理响应。它通常适用于大型文件。
内置 JSON 支持 − Fetch API 非常有效地支持 JSON 数据。它可以解析 JSON 响应并自动将它们转换为 JavaScript 对象。
与其他 API 集成 − 由于 Fetch API 的行为，它可以轻松地与其他 API 集成，如 Service Worker API、Cache API 等。
更多控件 − 使用 Fetch API，我们可以借助其他参数（如 header、method、body 等）轻松自定义请求。

缺点

以下是 Fetch API 的缺点 -

有限的 Web 浏览器支持 − 几乎所有现代 Web 浏览器都支持 Fetch API，但较旧的 Web 浏览器不支持 Fetch API。如果您使用的是较旧的 Web 浏览器，则必须使用较旧的方法，例如 XMLHttpRequest 等。
请求取消 - Fetch API 不提供任何内置方法来取消发起的请求。
超时 - Fetch API 不提供任何指定或内置方法来超时请求。如果要对请求强制超时，则必须手动执行此操作。
错误处理 − Fetch API 提供有限的错误处理方法。它将 2xx 以外的任何 HTTP 状态代码视为错误。此行为通常适用于某些特定情况，但并非适用于所有情况。
文件加载的进度事件 - Fetch API 不为文件上传提供任何内置事件。如果要监控文件上传的进度，则需要额外的库。
跨源限制 − 正如我们所知，Fetch API 遵循浏览器的同源策略，因此由于这个跨源请求需要在服务器端提供额外的 CORS 标头，或者需要接受 CORS 预检检查，这增加了开发的复杂性。

结论

因此，与 XMLHttpRequest 等传统方法相比，Fetch API 更加强大和灵活。它可以轻松地与其他 API 和平台集成。这是在 Web 应用程序中处理 HTTP 请求时常用的方法。现在在下一篇文章中，我们将了解 fetch API 和 XMLHttpRequest 之间的区别。

本页