如何在PyScript中正确显示天气预报数据详细教程
本文深入解析在 PyScript 项目中调用 Yandex 天气 API 时页面无输出的常见问题，并给出使用 display() 替代 print()、修复异步请求与 JSON 解析错误的完整解决方案，帮助开发者快速实现天气预报数据的可视化显示。
天气预报数据在页面上始终无法显示，这是 PyScript 社区中频繁遇到的高频痛点。不少开发者发现请求似乎已成功发送，控制台也未报错，但页面却一片空白——此时不必急于怀疑代码逻辑，问题往往出现在数据输出环节。
先梳理几个核心判断点。
自 PyScript 版本 2023.11.1 起，print() 的行为发生了重大变化：它不再默认将内容输出到网页上。所有 print() 产生的结果仅会出现在浏览器开发者工具的控制台（Console）中，不会渲染到页面 DOM 里。也就是说，代码确实执行了，但用户根本看不到结果——这正是页面空白的根本原因。
此外，原始代码中还隐藏着两个关键陷阱：
- 重复解析响应：
response.json()被调用了两次，一次赋值给response_dict，另一次直接使用data。但pyodide.fetch().json()返回的是 Promise，必须配合await才能获取实际数据； - 异步执行未等待完成：
asyncio.ensure_future()启动协程后立即返回，导致 PyScript 主线程可能在渲染前就已结束，使得display()来不及执行。
下面是一份修正后的完整可运行示例，兼容 PyScript ≥ 2024.1.1：
莫斯科天气预报 import pyodide import asyncio API_KEY = '8e4cf478-53b6-45bc-8597-9946db9f1fd5' url = 'https://api.weather.yandex.ru/v2/forecast' params = { 'lat': 55.753215, 'lon': 37.622504, 'lang': 'ru_RU' } headers = { 'X-Yandex-API-Key': API_KEY } async def get_weather(): try: # 正确发起带参数和头信息的 GET 请求 response = await pyodide.http.pyfetch( url, method="GET", headers=headers, params=params ) data = await response.json() # ✅ 唯一且正确的 await 解析 fact = data.get('fact', {}) temperature = fact.get('temp', '未知') condition = fact.get('condition', '未知') # ✅ 使用 display() 将内容输出到页面（自动追加到 标签位置） # 若需指定容器，可传入 target 参数（如 target="weather-output"） display(f"?️ 莫斯科实时天气：{temperature}°C，{condition}") except Exception as e: display(f"❌ 获取天气失败：{e}") # ✅ 使用 asyncio.create_task() 或直接 await（PyScript 支持顶层 await） await get_weather()
✅ 关键改进说明：
- 使用
pyodide.http.pyfetch()替代已废弃的pyodide.fetch()，语法更清晰、错误处理更健壮； display()是 PyScript 官方提供的 DOM 输出函数，支持字符串、HTML 片段，甚至 Pandas DataFrame 等对象，是替代print()的最佳实践；- 添加了
try...except异常处理，能有效捕获网络请求或 JSON 解析中的错误，提升程序稳定性； - 去掉了冗余的
asyncio.ensure_future()，改用await get_weather()—— PyScript 2023.12+ 支持顶层 await，确保异步任务执行完成后再继续后续渲染； - 通过显式指定
target参数（如display(..., target="weather-output")），可将输出内容精准插入指定 HTML 元素，实现更灵活的前端布局。
⚠️ 注意事项：
- Yandex 天气 API 需要有效的 API Key，且可能对免费调用量有限制，请确认密钥未过期、配额充足，否则请求可能失败；
- 浏览器 CORS 策略可能拦截跨域请求 —— Yandex API 支持前端直连，但若遇到 CORS 错误，请检查响应头是否包含
Access-Control-Allow-Origin: *； - PyScript 加载期间页面可能短暂空白，建议添加加载提示（如
Loading...
经过上述优化调整，天气预报数据将清晰、稳定地呈现在页面上，而不再仅隐藏于控制台之中，从而真正实现用户可见的实时天气展示。