使用JavaScript获取wttr.in API数据渲染网页时的代码异常排查

你的代码共有4处会直接导致运行失败的错误：

• 数据读取路径错误：你调用的天气接口返回的JSON结构中，current_condition数组是根对象的直接属性，不存在results嵌套层，原代码写data.results[0].current_condition[0]会触发「读取undefined属性」的运行时错误。
• 解构语法使用错误：temp_C字段本身就是存储摄氏温度的字符串值，不是对象，不需要做对象解构，直接读取该字段即可拿到温度值。
• DOM操作错误：你用来展示内容的是<p>段落标签，该标签没有href属性，要写入展示文本需要给元素的textContent属性赋值。
• 语法结构错误：getWeather函数缺少闭合的大括号，且函数调用语句被错误写在了函数体内部，会导致函数无法正常解析执行。

提示：如果本地直接双击打开HTML文件时遇到跨域报错，将文件部署到本地静态服务环境（比如编辑器的Live Server插件、本地Nginx静态目录）下访问即可正常请求。建议给请求逻辑加错误捕获，方便排查请求阶段的异常。

修复后可运行的完整代码 #

<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <p id="temp"></p>
</body>
<script>
  const api_url = "https://wttr.in/?format=j1";

  async function getWeather() {
    try {
      const response = await fetch(api_url);
      const data = await response.json();
      const currentCondition = data.current_condition[0];
      const temp = currentCondition.temp_C;
      document.getElementById("temp").textContent = `当前温度：${temp}℃`;
    } catch (error) {
      console.error("天气数据获取失败", error);
      document.getElementById("temp").textContent = "天气加载失败，请稍后重试";
    }
  }

  getWeather();
</script>
</html>

内容的提问来源于stack exchange，提问作者user3019354