使用JavaScript调用Web API，Web API 和身份验证

kllo__

已于 2022-03-09 10:06:41 修改

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript 前端 linq

于 2022-02-28 17:02:08 首次发布

本文链接：https://blog.csdn.net/kllo__/article/details/123135619

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

以下的示例显示了如何使用 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调用的结果如下所示：

{
  "response": {
    "version": "0.1",
    "termsofService": "http://www.wunderground.com/weather/api/d/terms.html",
    "features": {
      "conditions": 1
    }
  },
  "current_observation": {
    "image": {
      "url": "http://icons.wxug.com/graphics/wu2/logo_130x80.png",
      "title": "Weather Underground",
      "link": "http://www.wunderground.com"
    },
    "display_location": {
      "full": "Bordeaux, France",
      "city": "Bordeaux",
      "state": "33",
      ...
    },
    "observation_location": {
      "full": "Bordeaux, ",
      "city": "Bordeaux",
      "state": "",
      "country": "FR",
      ...
    },
    "estimated": {},
    "station_id": "LFBD",
    "observation_time": "Last Updated on June 28, 9:30 PM CEST",
    ...
  }
}

现在，我们只需要从我们的 JavaScript 代码调用API并在网页上显示主要结果。

html：

<html>
 <head>
 </head>
 <body>
	<h2>The weather in</h2>
	<div id="weather"></div>
  </body>
</html>

js:

/*
Weather in your area
*/

// Please generate yourself an API key instead of using mine
fetch(
  "http://api.wunderground.com/api/50a65432f17cf542/conditions/q/france/bordeaux.json"
)
  .then(response => response.json())
  .then(weather => {
    // Access some weather properties
    const location = weather.current_observation.display_location.full;
    const temperature = weather.current_observation.temp_c;
    const humidity = weather.current_observation.relative_humidity;
    const imageUrl = weather.current_observation.icon_url;
    // Create DOM elements for properties
    const summaryElement = document.createElement("div");
    summaryElement.textContent = `Temperature is ${temperature} °C with ${humidity} humidity.`;
    const imageElement = document.createElement("img");
    imageElement.src = imageUrl;
    // Add location to title
    document.querySelector("h2").textContent += ` ${location}`;
    // Add elements to the page
    const weatherElement = document.getElementById("weather");
    weatherElement.appendChild(summaryElement);
    weatherElement.appendChild(imageElement);
  })
  .catch(err => {
    console.error(err.message);
  });