如何使用 JavaScript `fetch()`【初学者指南】

使用异步通信从API获取数据的基础知识

🌤 实时演示

👇 结果如下 👇

正在获取温度...


      <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>显示温度</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f0f0f0;
    }
    #weather {
      font-size: 1.5rem;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>东京当前的温度</h1>
  <p id="weather">正在获取温度...</p>

  <script>
    async function getWeather() {
      try {
        const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917¤t_weather=true");
        const data = await res.json();
        const temp = data.current_weather.temperature;
        document.querySelector("#weather").textContent = `东京的温度: ${temp}℃`;
      } catch (e) {
        document.querySelector("#weather").textContent = "🌧 获取失败";
        console.error("错误:", e);
      }
    }
    getWeather();
  </script>

</body>
</html>

🧩 fetch 的使用方法與常見錯誤處理

fetch() 是 JavaScript 中用於非同步取得資料的現代函式，例如本文展示的氣溫顯示，就是從 API 取得資料後更新至畫面上的範例。

常見的使用方式為先使用 const res = await fetch(...) 發送請求，接著用 const data = await res.json() 解析回傳的 JSON 資料。這是與公開 API 通訊時最基本的寫法。

🚨 常見錯誤與應對方式

若 URL 錯誤或網路出現問題，可透過 try...catch 包覆 fetch()，即使失敗也能顯示「取得失敗」等提示，避免用戶困惑。

若想實現即時更新，例如定時取得最新天氣資訊，可將 fetch() 搭配 setInterval() 來達成定時重複執行。

注意部分 API 需要 API 金鑰，這種情況下請在網址末尾加上 ?apikey=你的金鑰，具體格式請依各 API 提供者文件為準。