Web API 是 Web 的应用程序编程接口 （API）。Web API 的概念不仅限于 JavaScript。它可以与任何编程语言一起使用。让我们先了解什么是 Web API。
什么是 Web API？
API 是 Application Programming Interface 的首字母缩写词。它是在两个软件组件或系统之间进行通信的标准协议或规则集。
Web API 是 Web 的应用程序编程接口。
API 提供了一种简单的语法来使用复杂代码。例如，您可以使用 GeoLocation API 通过两行代码获取用户的坐标。您无需担心它在后端的工作方式。
您可以采用的另一个实时示例是您家中的电力系统。当您将电缆插入插座时，您会获得电力。您无需担心电流如何进入插座。
Web API 有多种类型，其中一些如下 -
- 浏览器 API（客户端 JavaScript API）
- 服务器 API
- 第三方 API
让我们详细讨论上述每种类型的 Web API -
浏览器 API（客户端 JavaScript API）
浏览器 API 是由浏览器提供的一组 Web API。
浏览器 API 是在核心 JavaScript 之上开发的，您可以使用它来操作网页的功能。
有多个浏览器 API 可用于与 Web 页面交互。
以下是常见浏览器 API 的列表 -
- Storage API（存储 API） - 允许您将数据存储在浏览器的本地存储中。
- DOM API - 允许您访问 DOM 元素并对其进行操作。
- History API（历史 API ） - 允许您获取浏览器的历史记录。
- Fetch API（获取 API） - 允许您从 Web 服务器获取数据。
- Forms API（表单 API） - 允许您验证表单数据。
服务器 API
服务器 API 为 Web 服务器提供不同的功能。服务器 API 允许开发人员与服务器交互并访问数据和资源。
例如，REST API 是一个服务器 API，它允许我们在服务器上创建和使用资源。JSON API 是用于访问 JSON 格式数据的常用 API。XML API 是一种常用的 API，用于访问 XML 格式的数据。
第三方 API
第三方 API 允许您从他们的 Web 服务器获取数据。例如，YouTube API 允许您从 YouTube 的 Web 服务器获取数据。
以下是常见的第三方 API 列表。
- YouTube API - 允许您获取 YouTube 视频并在网站上显示它们。
- Facebook API - 允许您获取 Facebook 帖子并在网站上显示它们。
- Telegram API - 允许您获取消息并将其发送到 Telegram 。
- Twitter API - 允许您从 Twitter 获取推文。
- Pinterest API - 允许您获取 Pinterest 帖子。
您还可以为自己的软件创建和公开 API 终端节点。因此，其他应用程序可以使用您的 API 终端节点从您的 Web 服务器获取数据。
Fetch API：Web API 示例
以下是如何使用 fetch API 的示例。在下面的示例中，我们获取 API 以访问来自给定 URL （'https://jsonplaceholder.typicode.com/todos/5） 的数据。fetch（） 方法返回一个 Promise，我们使用 “then” 块处理该 Promise。首先，我们将数据转换为 JSON 格式。之后，我们将数据转换为字符串并将其打印在网页上。
<html>
<body>
<h3> Fetch API: An Example of Web API </h3>
<div id = "output"> </div>
<script>
const URL = 'https://jsonplaceholder.typicode.com/todos/5';
fetch(URL)
.then(res => res.json())
.then(data => {
document.getElementById('output').innerHTML +=
"The data accessed from the API: " + "<br>" +
JSON.stringify(data);
});
</script>
</body>
</html>
JavaScript Web API 列表
在这里，我们列出了最常见的 Web API。
| API | 描述 |
|---|---|
| Console API | 用于与浏览器的控制台进行交互。 |
| Fetch API | 用于从 Web 服务器获取数据。 |
| FullScreen API | 包含在全屏模式下处理 HTML 元素的各种方法。 |
| GeoLocation API | 包含获取用户当前位置的方法。 |
| History API | 用于根据浏览器的历史记录在浏览器中导航。 |
| MediaQueryList API | 包含用于查询媒体的方法。 |
| Storage API | 用于访问本地和会话存储。 |
| Forms API | 用于验证表单数据。 |
