HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Fetch API - 基础知识

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

以下是Fetch API的关键组件 −

  • fetch() 函数 − 要获取资源或创建请求 Fetch API 使用名为 fetch() 的全局方法。 它返回一个 Promise，进一步解析为 Response 对象。

  • 请求和响应对象 − Request 对象用于表示正在发送的请求，其中包含 URL、标头等所有信息。而 Response 对象用于表示服务器返回的响应，包括状态代码、正文和响应标头。

  • Promise − Fetch API 基于 Promise，因为它们异步处理操作和管理响应流。 使用 Promise，我们可以创建一个操作链，并可以使用 .then() 和 .catch() 函数处理成功和错误。

  • 自定义 − 使用 Fetch API，我们可以通过指定方法、向请求添加正文、设置标头、处理不同格式的数据等来自定义请求。

  • CROS − Fetch API 对 CROS（跨域资源共享）提供了良好的支持，允许用户向不同域发出请求。

Fetch API 的工作原理

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

基础

以下是对上述流程图的逐步解释 −

步骤 1 − 请求初始化：在客户端，JavaScript 程序使用 fetch() 函数创建请求对象。 在此 fetch() 函数中，我们传递从中获取资源的 URL 以及其他可选控件，如标头、方法、正文等。

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

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

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

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

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

步骤 7 − 解析响应：如果服务器响应包含文本数据，则 JavaScript 程序使用 .json()、.text()、.blob() 等内置方法从响应中解析和提取数据。

步骤 8 − 错误处理：如果服务器返回错误，则该错误由 catch() 函数处理。

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

优点

以下是Fetch API的优点 −

  • 易于使用 − Fetch API 提供简单直接的语法来创建异步请求。

  • 承诺 − 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，我们可以借助标头、方法、正文等其他参数轻松自定义请求。

缺点

以下是Fetch API的缺点 −

  • 有限的网络浏览器支持 − 几乎所有现代 Web 浏览器都支持 Fetch API，但较旧的 Web 浏览器不支持。 如果您使用的是旧版 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 之间的区别。

❮ 上一节 下一节 ❯