pyscript 默认的 print() 输出仅显示在浏览器控制台，需改用 display() 函数将结果渲染到页面；同时原代码存在异步调用未等待、json 解析重复、错误处理缺失等问题，需一并修正。
pyscript 默认的 print() 输出仅显示在浏览器控制台，需改用 display() 函数将结果渲染到页面；同时原代码存在异步调用未等待、json 解析重复、错误处理缺失等问题，需一并修正。
要在网页中成功显示 Yandex 天气 API 返回的实时温度，不能依赖 print()——自 PyScript 2023.11.1 版本起，print() 仅输出至浏览器开发者工具的 Console 面板，不会自动写入 HTML 页面。必须使用 PyScript 内置的 pyscript.display() 函数（简写为 display()）显式地将内容插入 DOM。
此外，原始脚本还存在几处关键问题：
- ❌
asyncio.ensure_future(get_weather())不会阻塞或等待执行完成，且在 PyScript 环境中推荐使用await+asyncio.create_task()或直接await（需在支持的上下文中）； - ❌
response.json()被调用了两次：第一次赋值给response_dict，第二次又直接调用却未 await，导致 TypeError（.json()是协程，必须await）； - ❌ 缺少网络请求错误处理（如 API 密钥无效、网络超时、403/400 响应），易导致静默失败；
- ❌
pyodide.fetch()在新版 PyScript 中已不推荐直接使用，应优先采用pyfetch（来自pyodide.http）以获得更一致的异步体验。
✅ 正确做法如下（适配 PyScript ≥ 2023.11.1）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>莫斯科天气预报</title>
<script defer src="https://pyscript.net/releases/2024.1.1/pyscript.js"></script>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/pyscript.css"/>
</head>
<body>
<h2>当前天气</h2>
<div id="weather-output"></div>
<py-script output="weather-output">
import asyncio
from pyodide.http import pyfetch
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:
response = await pyfetch(
url=url,
method="GET",
headers=headers,
params=params
)
if response.status != 200:
raise Exception(f"API 请求失败: {response.status} {response.statusText}")
data = await response.json()
fact = data.get('fact', {})
temperature = fact.get('temp', '未知')
# ✅ 使用 display() 渲染到页面（自动绑定到 output="weather-output"）
display(f"?️ 莫斯科实时气温：{temperature} °C")
except Exception as e:
display(f"❌ 获取天气失败：{e}")
# 启动异步任务（PyScript 自动处理事件循环）
await get_weather()
</py-script>
</body>
</html>? 关键要点总结：
-
display()是 PyScript 官方推荐的页面输出方式，支持字符串、HTML 片段、甚至 Pandas DataFrame 等对象（自动渲染）； -
<py-script output="xxx"></py-script>中的output属性指定目标 DOM 元素 ID，内容将被注入其内部（替代 innerHTML）； - 务必
await所有异步操作（包括pyfetch和.json()），避免未定义行为； - 始终包裹网络请求于
try/except，防止因 API 异常导致脚本静默终止； - 建议升级 PyScript 至最新稳定版（如
2024.1.1），以获得更好的兼容性与文档支持。
完成上述修改后，刷新页面即可在 <div id="weather-output"> 区域看到清晰的天气结果——不再是空白页，也不再需要打开控制台查找日志。</div>
