简单天气应用开发教程详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《简单天气查询应用开发教程》，聊聊，我们一起来看看吧！

OpenWeatherMap是最稳妥的免费稳定天气API，新用户享每分钟1000次调用，支持多查询方式；需规避需验证或聚合中转类API，API key须存环境变量；错误处理需关注401、404、429响应；数据渲染禁用innerHTML，应使用textContent和属性赋值；本地开发跨域问题须通过本地HTTP服务或代理解决。

怎么选免费又稳定的天气 API

OpenWeatherMap 是目前最稳妥的选择，新注册用户直接获得每分钟 1000 次调用配额，current 接口返回结构清晰、字段完整，且支持城市名、经纬度、IP 地理定位三种查询方式。避免用需要邮箱验证或强制绑定支付方式的接口（比如某些国内平台要求企业资质），也别碰返回格式不一致的聚合类中转 API —— 它们常把 404 错误伪装成 200 成功响应，导致前端逻辑误判。

注册后拿到的 API key 要藏在环境变量或服务端代理里，千万别硬编码进前端 JS 文件，否则会被爬走滥用。

用 fetch 调天气接口时怎么处理常见错误

天气请求失败不全是网络问题，更多是参数或权限原因。必须检查三类响应：

• 401 Unauthorized：API key 错了或没生效，等 5 分钟再试（OpenWeatherMap 有时有缓存延迟）
• 404 Not Found：城市名拼错，比如 shangahi；或者用了中文城市名但没加 lang=zh_cn 参数
• 429 Too Many Requests：本地开发时反复刷新没加防抖，建议加个 setTimeout 限制手动重试间隔

示例请求片段：

fetch(`https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=${key}&units=metric`)

怎么把 JSON 天气数据安全塞进 HTML 页面

别用 innerHTML += 拼接字符串，容易触发 XSS —— 如果 API 返回的 name 字段被注入了