天气预报小工具-三亩地-编程学习日记

全栈 · 初级

第一次让网页「联网」起来

前两个案例的数据都是写死的，这个项目第一次让网页去拿真实数据。输入一个城市名，等几秒，屏幕上显示当前温度、湿度、风力。听起来简单，但它把异步、错误处理、加载态、跨域这四件事一次性塞到你面前，是理解「前后端如何通信」的最短路径。

技术栈 JavaScript / Fetch API

预计耗时 3 - 5 小时

难度等级初级

数据来源 OpenWeather API

Fetch API async/await JSON try/catch loading 态

STEPS

分五步拿到天气

把网络请求拆成「输入 → 请求 → 等待 → 渲染 → 出错」五个状态，每个状态单独处理。

1

注册并拿到 API Key

去 OpenWeatherMap 注册一个免费账号，拿到一串 API Key。免费额度每天 1000 次够你测试。先把 Key 放在代码里跑通，后面再考虑用环境变量或代理藏起来——直接硬编码到生产是反模式，但学习阶段别被这个绊住。

2

拼接口地址并先在浏览器试

把 URL 拼好：https://api.openweathermap.org/data/2.5/weather?q=上海&appid=你的KEY&units=metric&lang=zh_cn。先直接粘到浏览器地址栏回车，看到返回的 JSON 之后再写代码——别一上来就 fetch，错了都不知道是 URL 错还是代码错。

3

写 fetch 与 try/catch

用 async/await 写一个 getWeather(city) 函数。务必包在 try/catch 里：网络请求可能超时、断网、城市名拼错、API Key 过期——这五类错误你都得给用户一个看得过去的提示，而不是让页面卡死。

4

三种 UI 状态切换

渲染区域至少要有三种状态：loading（请求中显示骨架或转圈）、success（拿到数据渲染温度、城市、天气描述、图标）、error（显示错误原因 + 重试按钮）。把这三态写进同一个 render() 函数里，根据当前状态切换 DOM。

5

处理跨域与缓存

大多数公开 API 都默认允许跨域，你不用额外处理；但如果遇到 CORS 报错，要么换支持 CORS 的接口，要么自己写个后端代理。最后给结果加个本地缓存：5 分钟内同一城市不重复请求，既省额度又快。

CODE

关键代码片段

一个完整的「请求 + 三态渲染」函数，几乎能套到任何数据获取场景。

const API_KEY = '你的key';
const weatherBox = document.querySelector('.weather-box');

async function getWeather(city) {
  weatherBox.innerHTML = '<div class="loading">查询中...</div>';
  try {
    const res = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=zh_cn`
    );
    if (!res.ok) throw new Error(res.status === 404 ? '找不到这个城市' : '服务异常');
    const data = await res.json();
    render(data);
  } catch (err) {
    weatherBox.innerHTML = `
      <div class="error">
        <p>⚠️ ${err.message}</p>
        <button onclick="getWeather('${city}')">重试</button>
      </div>`;
  }
}

function render(d) {
  weatherBox.innerHTML = `
    <h3>${d.name}</h3>
    <div class="temp">${Math.round(d.main.temp)}°C</div>
    <p>${d.weather[0].description} · 湿度 ${d.main.humidity}%</p>
    <img src="https://openweathermap.org/img/wn/${d.weather[0].icon}@2x.png" alt="${d.weather[0].description}">
  `;
}

第一次跑通接口请求，看到屏幕上跳出真实城市的真实温度，那种「我的代码居然能和全世界的服务器说话」的兴奋感，是后面所有进阶的燃料。记住那一刻，之后学 Promise、axios、GraphQL 都是在给它加细节而已。

—— 三亩地 · 案例笔记

联网拿到了数据，下一步我们用正则做一个能实时预览的 Markdown 编辑器。

← 上一篇：个人博客静态站下一篇：Markdown 编辑器 →

或者去小型实战项目继续练 →

天气预报小工具