如何在 PyScript 中正确显示天气预报数据到网页-js教程-PHP中文网

如何在 PyScript 中正确显示天气预报数据到网页

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）：



    <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"><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>

? 关键要点总结：