❮ ❯

JavaScript - Web API

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 可用于与网页交互。

以下是常用浏览器 API 的列表 -

存储 API - 它允许您将数据存储在浏览器的本地存储中。
DOM API - 它允许您访问 DOM 元素并对其进行操作。
历史记录 API - 它允许您获取浏览器的历史记录。
获取 API - 它允许您获取来自 Web 服务器的数据。
表单 API - 它允许您验证表单数据。

服务器 API

服务器 API 为 Web 服务器提供不同的功能。服务器 API 允许开发者与服务器交互并访问数据和资源。

例如，REST API 是一种服务器 API，它允许我们在服务器上创建和使用资源。JSON API 是一种用于访问 JSON 格式数据的常用 API。XML API 是一种用于访问 XML 格式数据的常用 API。

第三方 API

第三方 API 允许您从其 Web 服务器获取数据。例如，YouTube API 允许您从 YouTube 的网络服务器获取数据。

以下是常见的第三方 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() 方法返回一个 Promise，我们使用 then 块对其进行处理。首先，我们将数据转换为 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>