JavaScript Fetch API

要从服务器获取信息，请使用 JavaScript 的 get() 方法。可以请求返回 JSON 或 XML 格式数据的任何类型的 API。Fetch() 方法只需要一个参数：请求的 URL，它也返回一个 Promise。

使用 Fetch 发送请求

JavaScript Fetch API 会向 URL 发送请求。如果请求发送成功，则显示响应。如果请求未发送，则显示错误。

语法

以下语法展示了使用 JavaScript 的 fetch API 方法来发送 URL 请求。

• 我们将配置对象和端点 URL 传递给 fetch 方法。
• 我们将提供的信息提交到 HTML 或 JavaScript 组件中，并显示为输出。

使用 Fetch API 读取响应

JavaScript Fetch API 会向 URL 发送请求并从 API 获取响应。如果请求成功发送，则 API 获取响应并显示数据。

语法

以下语法展示了使用 JavaScript 的 fetch API 方法来读取 URL 的响应。

参数

此技术接受两个参数，但有一个参数对该方法至关重要。

• URL：这是应该发送请求的 URL。
• Options：一组属性。这是一个可选参数。

返回值

• 无论 Promise 是否解决，它都会返回一个 Promise。
• 返回的信息可能是 XML 或 JSON 格式。
• 它可能是一个对象集合，也可能只是一个对象。

示例

以下示例展示了 JavaScript 中的 fetch API 方法。

示例 1

示例展示了使用 JavaScript 函数的基本 fetch API 方法。

输出

提供的图像显示了控制台中的 URL 文件值作为输出。

示例 2

示例展示了使用 JavaScript 函数的基本 fetch API 方法。URL 文件数据通过 JavaScript 函数显示在控制台中。我们可以在网页上获取 JSON 数据。

输出

提供的图像显示了控制台中的 URL 文件信息作为输出。

示例 3

示例展示了使用 JavaScript 函数发送请求的基本 fetch API 方法。如果 fetch 方法发送错误的 URL，则 JavaScript 会在控制台中显示错误消息。

输出

提供的图像显示了控制台中的错误信息作为输出。

示例 4

示例展示了使用 JavaScript 函数发送 URL 请求的基本 fetch API 方法。fetch 方法发送 URL 并将状态数据发送到控制台。我们可以在网页的控制台中获取 JSON 数据。

输出

提供的图像显示了控制台中的 URL 文件信息作为输出。

示例 5

示例展示了使用 JavaScript 函数发送 URL 请求的基本 fetch API 方法。fetch 方法发送错误的 URL 并将状态数据发送到控制台。

输出

提供的图像显示了控制台中的错误状态作为输出。

示例 6

示例展示了使用 JavaScript 函数发送 URL 请求的基本 fetch API 方法。我们将为 HTML 部分构建一个简单的表单，要求用户输入标题和正文。请注意，ID 是自动生成的。至于脚本，我们在插入事件监听器函数后运行 get 方法。

输出

图像显示了控制台和网页中的用户信息作为输出。

示例 7

提供的示例展示了 JavaScript 函数的基本图像 URL 请求。fetch 方法发送图像的 URL，将其转换为 blob，并在网页上显示。

输出

提供的图像显示了网页上所需的图像作为输出。

结论

JavaScript 中的 fetch API 方法用于响应 URL 并显示给定的数据。数据以 JSON 格式显示，也以图像形式显示。对于开发人员处理 URL 请求及其数据来说，这是一种简单而重要的方法。