Web API 是应用编程接口（API）的一种形式，用于网络应用。Web API 的概念不仅仅局限于 JavaScript，它可以与任何编程语言一起使用。让我们首先了解什么是 Web API。
什么是 Web API？
API 是 Application Programming Interface（应用程序编程接口）的缩写。它是一种标准协议或一组规则，用来使两个软件组件或系统之间进行通信。
Web API 是一种用于网络的应用程序编程接口。
API 提供了一种易于使用的语法来调用复杂的代码。例如，你可以使用 GeoLocation API 仅用两行代码来获取用户的坐标，而不需要关心后端是如何工作的。
另一个实时的例子可以是你家里的电力系统。当你把电缆插入插座时，你会得到电。你不需要担心电是如何进入插座的。
有不同类型的 Web API，其中一些如下：
-
浏览器 API（客户端 JavaScript API）
-
-
让我们详细讨论以上每种类型的 Web API。
浏览器 API（客户端 JavaScript API）
浏览器 API 是一组由浏览器提供的 Web API。
浏览器 API 建立在核心 JavaScript 之上，你可以用它来操作网页的功能。
有许多可用的浏览器 API 可以用来与网页交互。
以下是常见的浏览器 API 列表：
-
存储 API — 允许你在浏览器的本地存储中存储数据。
-
DOM API — 允许你访问 DOM 元素并操纵它们。
-
历史记录 API — 允许你获取浏览器的历史记录。
-
Fetch API — 允许你从 Web 服务器获取数据。
-
服务器 API
服务器 API 向 Web 服务器提供不同的功能。服务器 API 允许开发者与服务器交互并访问数据和资源。
例如，REST API 是一种服务器 API，允许我们创建和消费服务器上的资源。JSON API 是一种流行的 API，用于以 JSON 格式访问数据。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 的例子。在下面的例子中，我们使用 Fetch API 从指定的 URL（'https://jsonplaceholder.typicode.com/todos/5'）获取数据。fetch() 方法返回一个我们通过 “then” 块处理的 promise。首先，我们将数据转换为 JSON 格式。之后，我们将数据转换为字符串并在网页上打印出来。
<html>
<body>
<h3> Fetch API: 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 =
"从 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 |
用于验证表单数据。 |