??????? 以下的示例显示了如何使用 JavaScript 调用 Web API。
<html>
<head>
</head>
<body>
<h2> Some blog articles</h2>
<div id="articles"></div>
</body>
</html>// Fetch data from the API
fetch("https://thejsway-server.herokuapp.com/api/articles")
.then(response => response.json()) // Translate JSON into JavaScript
.then(articles => {
articles.forEach(article => {
// Create title element
const titleElement = document.createElement("h3");
titleElement.textContent = article.title;
// Create content element
const contentElement = document.createElement("p");
contentElement.textContent = article.content;
// Add title and content to the page
const articlesElement = document.getElementById("articles");
articlesElement.appendChild(titleElement);
articlesElement.appendChild(contentElement);
});
})
.catch(err => {
console.error(err.message);
});??????? 使用Web API 就像查询Web服务器一样工作：获取 API URL，将JSON 响应转换为JavaScript 数组并对其迭代。
Web API 和身份验证
??????? Web API 可以分为两类;
- 无需任何身份验证即可使用的开放API
- 要求消费者通过各种方法对自己进行身份验证的API
开放API
?????? 无论如何，任何人都可以免费使用这些API 。为了防止滥用，它们经常使用一些速率限制来代替：来自一个特定的来源（由其IP地址标识）的呼叫数量是有上限的。
??????? 英国警方或法国政府等许多公共机构使用开放的API项公民发布数据。
??????? 还有一些有趣的API 可用。例如，Punk API 可让您搜索大量的啤酒目录。以下是如何通过从从此API获取的饮酒习惯来更新您的饮酒习惯。
<html>
<head>
</head>
<body>
<button id="grabButton">Grab a beer</button>
<div id="beer"></div> </body>
</html>// Anonymous function for retrieving and displaying a random beer
const grabRandomBeer = () => {
// Fetching random beer data from API
fetch("https://api.punkapi.com/v2/beers/random")
.then(response => response.json())
.then(beers => {
// API returns an array containg only one element: we get it
const beer = beers[0];
// Creating DOM element for some beer properties
const nameElement = document.createElement("h2");
nameElement.textContent = beer.name;
const descriptionElement = document.createElement("p");
descriptionElement.textContent = beer.description;
// Clear previous beer data
const beerElement = document.getElementById("beer");
beerElement.innerHTML = "";
// Add beer info to the page
beerElement.appendChild(nameElement);
beerElement.appendChild(descriptionElement);
})
.catch(err => {
console.error(err.message);
});
};
// Grab a new beer when clicking the button
document.getElementById("grabButton").addEventListener("click", grabRandomBeer);显示效果：
需要身份验证的API
??????? 另一类API要求客户在访问服务时对自己进行身份验证。身份验证可以通过多种技术完成。在本段中，我们将使用最简单的一个：访问密钥。访问密钥是生成的包含字符和数字并与用户相关联的字符串。
??????? 通常，基于身份验证的API也有速率限制。
??????? 访问密钥没有通用标准。每个服务都可以免费使用自己的自定义格式。客户端在访问API时必须提供其访问密钥，通常是在API URL的末尾添加它。使用任何基于密钥的Web API的先决条件是为此特定服务生成访问密钥。
??????? 让我们把这个应用到实践中，以获得您所在地区的当前天气。要做到这一点，你可以简单地看看窗外，但使用 Weather Underground 的网络服务会酷很多。这个服务有一个基于密钥的API，用于检索任何地方的天气。要获得它，您必须作为用户注册（免费注册），并通过注册您的应用程序生成一个新的 API 密钥。
??????? 完成注册后，你可以使用自己的设置替换 ACCESS_KEY 和COUNTRY 和TOWN ，你就可以获得你周围的天气了。必要的一步是检查和理解API数据格式。当获取法国波尔多的天气时，API调用的结果如下所示：