Ajax 简明教程
Fetch API - Basics
Fetch 是一种基于承诺的 API，它提供了一个 JavaScript 接口来访问或以异步方式操作请求和响应。与 XMLHttpRequest 相比，它功能更强大，使用 Fetch API，我们可以向服务器发送数据，也可以从服务器异步请求数据。它还使用请求和响应对象以及 CORS 和 HTTP 起源头部概念。
以下是 Fetch API 的关键组件 −
-
fetch() function − 要获取资源或创建请求，Fetch API 使用名为 fetch() 的全局方法。它返回一个承诺，该承诺进一步解析为 Response 对象。
-
Request and Response Object − Request 对象用于表示使用 URL、头等全部信息发送的请求。而 Response 对象用于表示服务器返回的响应，其中包括状态代码、正文和响应头。
-
Promises − Fetch API 基于承诺，因为它们处理操作并异步管理响应流。使用承诺，我们可以创建一系列操作，并可以使用 .then() 和 .catch() 函数来处理成功和错误。
-
Customization − 使用 Fetch API，我们可以通过指定方法、向请求添加正文、设置头、处理不同格式的数据等来定制请求。
-
CROS − Fetch API 为 CROS（跨域资源共享）提供了良好的支持，这允许用户向不同域发出请求。
Working of Fetch API
Fetch API 用于从 Web 浏览器的 JavaScript 代码创建 HTTP 请求。因此，使用以下步骤，我们将了解 Fetch API 从发送请求到接受响应的工作原理 -
下面是上面流程图的分步说明 -
Step 1 − 请求初始化：在客户端，JavaScript 程序使用 fetch() 函数创建请求对象。在此 fetch() 函数中，我们将传递要从中获取资源的资源 URL 以及其他可选控件，如头、方法、正文等。
Step 2 − 发送请求：在初始化请求之后，Fetch API 会使用给定的 URL 将请求发送到服务器。如果该请求是 GET 请求，则浏览器会将请求直接发送到服务器。如果该请求不是 GET 请求，则浏览器会发送一个预检 OPTIONS 请求，以检查服务器是否允许该请求。
Step 3 − 服务器处理：接收到请求后，服务器会处理该请求。它可以对该请求执行各种操作，如处理请求、检索数据等。
Step 4 − 生成响应：现在，服务器根据给定的请求生成响应。服务器响应通常包含一个状态代码（例如 200 表示成功，404 表示找不到请求等）、响应头和可选的正文。
Step 5 − 接收响应：Web 浏览器从服务器接收到响应。现在，Fetch API 使用承诺来解析服务器发送的响应对象。
Step 6 − 处理响应：Fetch API 使用基于承诺的语法来处理服务器返回的响应。使用它，我们可以访问响应状态、正文和头，并且可以在接收的数据上执行操作。
Step 7 − 解析响应：如果服务器响应包含文本数据，则 JavaScript 程序使用内置方法（如 .json()、.text()、.blob() 等）从响应中解析和提取数据。
Step 8 − 错误处理：如果服务器返回错误，则错误将由 catch() 函数处理。
这些是理解获取 API 工作流程的基本步骤。这些步骤可以根据实际使用情况的复杂性而有所不同。另外，众所周知，Fetch API 是异步的，因此它不会在等待服务器响应时阻塞其他 JavaScript 代码的执行。
Advantages
下面是获取 API 的优点 -
-
Easy to use − 获取 API 提供简单明了的语法来创建异步请求。
-
Promise − 获取 API 使用承诺，因此它可以轻松处理异步操作。承诺提供了一种精确的方法来轻松处理响应和错误。
-
Modern and browser support − 获取 API 是现代网络标准，它内置在 Web 浏览器中，因此几乎所有现代 Web 浏览器和平台都支持它。与 XMLHttpRequest 相比，这使得获取 API 更具一致性和可预测性。
-
Streaming and progressive loading − 获取 API 支持流式响应，这意味着在完全加载响应之前我们可以开始处理它。对于大文件，这通常很有用。
-
In-built JSON support − 获取 API 非常高效地支持 JSON 数据。它可以解析 JSON 响应，并自动将其转换为 JavaScript 对象。
-
Integrate with other APIs − 由于 Fetch API 的行为，它可以轻松地与其他 API 集成，比如 Service Worker API、Cache API 等。
-
More Controls − 使用获取 API，我们可以使用标头、方法、正文等附加参数轻松地自定义请求。
Disadvantages
以下是不利的一面获取 API −
-
Limited web browser support − 几乎所有现代 Web 浏览器都支持获取 API，但较旧的 Web 浏览器不支持它。如果你正在使用较旧的 Web 浏览器，那么你将不得不使用旧方法，比如 XMLHttpRequest 等。
-
Request Cancellation − 获取 API 没有提供任何内置的方法来取消已启动的请求。
-
Timeouts − 获取 API 没有提供任何指定或内置的方法来让请求超时。如果你想强制执行请求的超时，那么你必须手动完成。
-
Error Handling − 获取 API 提供了有限的错误处理方法。它将 2xx 以外的任何 HTTP 状态码都视为错误。这种行为通常适用于某些特定情况，但不适用于所有情况。
-
Progress event for file load − 获取 API 没有为文件上传提供任何内置事件。如果你想监控文件上传的进度，那么你需要额外的库。
-
Cross-origin Limitation − 正如我们所知，获取 API 遵守浏览器的同源策略，因此由于这个跨域请求在服务器端所需的额外 CORS 标头或者受 CORS 预检检查的约束，从而给开发增加了额外的复杂性。