使用 API 集成构建简单的天气应用程序
随着我继续学习和提高编码技能，我决定使用 API 来构建一个基本的天气应用程序来获取实时数据。这个项目帮助我了解了如何与 API 交互、处理异步操作以及动态更新用户界面。在本博客中，我将引导您完成用于创建应用程序的代码。
项目概况
天气应用程序获取给定位置的天气数据并显示当前天气和 3 天的天气预报。它使用 WeatherAPI 收集数据，并由 JavaScript 处理该功能。
主要特点
位置搜索：用户可以输入城市名称来获取天气数据。
当前天气：显示当前温度、天气状况等。
天气预报：显示未来 3 天的天气预报。
让我们看一下使这个应用程序运行的代码的关键部分。
第一步是从 WeatherAPI 获取天气数据。以下是我如何设置函数来处理 API 调用：
async function searchWeather(term) {
var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
if (response.ok && response.status !== 400) {
let weatherData = await response.json();
displayCurrent(weatherData.location, weatherData.current);
displayForecast(weatherData.forecast.forecastday);
}
}
该函数使用 fetch() 向 WeatherAPI 发出异步请求。它检索当前天气和 3 天的天气预报，然后将该数据传递给 displayCurrent() 和 displayForecast() 函数。
应用程序通过搜索框监听用户输入。当用户输入某个位置（例如“伦敦”）时，它会触发天气搜索：
document.getElementById('search').addEventListener('keyup', function (event) {
searchWeather(event.target.value);
});
另外，我添加了一个按钮，点击时触发搜索：
document.getElementById('searchBtn').addEventListener('click', function() {
let searchTerm = document.getElementById('search').value;
searchWeather(searchTerm);
});
这允许用户在搜索框中键入或单击搜索按钮来获取天气数据。
获取数据后，displayCurrent() 函数负责在页面上显示当前天气详细信息。其工作原理如下：
函数displayCurrent（位置，当前天气）{
如果（当前天气）{
让lastUpdatedDate = new Date(currentWeather.last_updated);
让cardHTML = `
<div>
<p>此函数会生成一张卡片，显示当前温度、天气状况以及风速和湿度等其他详细信息。它通过将生成的 HTML 插入 DOM 来动态更新页面。</p>
<hr>
<ol>
<li>显示 3 天天气预报</li>
</ol>
<p>接下来，我显示未来三天的天气预报。这是由 displayForecast() 函数处理的：<br>
</p>
<pre class="brush:php;toolbar:false">函数displayForecast(forecastData) {
让 ForecastHTML = '';
for (让 i = 1; i
<p>此函数循环预测数据并生成未来两天的卡片，显示最高和最低温度、天气状况和图标。</p>
<hr>
<p>结论</p>
<p>构建这个天气应用程序对我来说是一次很好的练习，因为我学会了如何与 API 交互、处理 JSON 数据以及动态更新网页。该项目帮助我巩固了异步 JavaScript、DOM 操作和事件处理方面的知识。</p>
<p>如果您刚刚开始使用 JavaScript 和 API，这款天气应用程序是练习技能的简单而强大的方法。您可以通过添加更多功能（例如错误处理、更详细的预测，甚至 UI 的深色模式）来扩展此项目。</p>
<hr>
<p>请随意尝试代码并调整它以满足您的需求。如果您有任何问题或建议请告诉我！</p>
以上是我的第一个天气应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
