js 获取天气|极客笔记

js 获取天气

天气信息是人们日常生活中关注的重要信息之一，通过获取天气信息可以帮助人们合理安排自己的生活和工作。在网页开发中，获取天气信息并展示在网页上也是一种常见的需求。本文将详细介绍如何使用 JavaScript 获取天气信息，并在网页上展示。

1. 获取天气API

要获取天气信息，我们首先需要找到一个提供天气数据的API。目前市面上有很多免费的天气API供开发者使用，其中比较常用的有心知天气API、高德地图API、和风天气API等。

在本文中，我们将以和风天气API为例进行说明。和风天气API提供了多种天气数据接口，包括实时天气、未来天气、天气预警等。开发者可以根据自己的需求选择合适的接口进行调用。

首先，我们需要在和风天气官网进行注册，并获取自己的API Key。

2. 使用 JavaScript 获取天气信息

接下来，我们将使用 JavaScript 编写代码，通过和风天气API获取天气信息。

2.1 发起 API 请求

我们首先需要构建一个 API 请求，包括API地址、城市名称和API Key。以下是一个简单的示例：

const apiKey = 'your_api_key';
const city = 'beijing';
const apiUrl = `https://free-api.heweather.net/s6/weather/now?location= ${city}&key=$ {apiKey}`;

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这段代码中，我们首先定义了API Key和城市名称，然后构建了一个API请求URL，并使用fetch函数发起了一个GET请求。请求成功后，我们将返回的数据打印出来。

2.2 解析返回数据

当请求成功后，我们会得到包含天气信息的 JSON 数据，我们需要解析这些数据并提取我们需要的信息。以下是一个简单的示例：

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    const weatherData = data.HeWeather6[0];
    const now = weatherData.now;
    const temperature = now.tmp;
    const weather = now.cond_txt;

    console.log(`当前城市： ${weatherData.basic.location}`); console.log(`当前温度：$ {temperature}°C`);
    console.log(`天气状况：${weather}`);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这段代码中，我们首先从返回的数据中提取出我们需要的信息，包括城市名称、当前温度和天气状况，并将这些信息打印出来。

2.3 在网页上展示天气信息

最后，我们可以将获取到的天气信息展示在网页上。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气信息</title>
</head>
<body>
  <h1>当前天气</h1>
  <p id="city"></p>
  <p id="temperature"></p>
  <p id="weather"></p>

  <script>
    const apiKey = 'your_api_key';
    const city = 'beijing';
    const apiUrl = `https://free-api.heweather.net/s6/weather/now?location= ${city}&key=$ {apiKey}`;

    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        const weatherData = data.HeWeather6[0];
        const now = weatherData.now;
        const temperature = now.tmp;
        const weather = now.cond_txt;

        document.getElementById('city').textContent = `当前城市： ${weatherData.basic.location}`; document.getElementById('temperature').textContent = `当前温度：$ {temperature}°C`;
        document.getElementById('weather').textContent = `天气状况：${weather}`;
      })
      .catch(error => {
        console.error('Error:', error);
      });
  </script>
</body>
</html>

在这段代码中，我们构建了一个简单的HTML页面，通过JavaScript获取天气信息并动态展示在页面上。