在前面的幾天裡，我們學會了如何用 JS 操控 DOM、監聽事件、甚至做出了互動彈跳視窗。但你有沒有發現：我們寫的資料（像是 Todo 列表、商品清單）全都是寫死在程式碼裡面的（Hardcode）。
如果今天你要做一个電商網站，有幾萬筆商品資料總不可能全部手動打在 HTML 裡吧？這些資料通常都躺在遠端的伺服器資料庫裡。

今天我們就要來解鎖前端最神氣的功能——用 JavaScript 去外面把資料「抓」回來的 Fetch API！

什麼是 API？就像餐廳的「點餐服務生」

在認識怎麼抓資料之前，先來理解什麼是 API（Application Programming Interface）：

• 想像你去餐廳吃飯，你（前端網頁）坐在座位上，廚房（後端伺服器與資料庫）裡面有滿滿的食材（資料）。
• API 就是那位服務生：你把需求告訴服務生（發送請求），服務生跑去廚房把熱騰騰的菜餚端回來給你（回傳資料）。
  透過 API，網頁可以隨時跟外部伺服器要資料，而不用重新整理整個網頁。

為什麼需要「非同步（Asynchronous）」？

當我們叫 JavaScript 去跟遠端伺服器要資料時，因為網路需要時間傳輸（可能要等 0.5 秒或 1 秒），如果程式呆呆地停在原地不動，整顆網頁就會暫時「當機卡住」。
這時候就要靠 非同步機制（Async / Await）：

• 意思是告訴瀏覽器：「我去遠端廚房幫你拿資料囉！你先忙別的事，等資料一到我馬上叫你！」
• 這讓網頁在等待資料回傳的同時，使用者依然可以順暢地滑動、點擊其他按鈕。

程式碼怎麼寫？用 fetch() 把資料抓下來

來看一段最經典的串接範例。我們用一個免費的公開測試 API（jsonplaceholder），來把假的使用者資料抓回來：

// 宣告一個非同步函式來抓取資料
async function fetchUserData() {
    try {
        // 1. 發送請求，跟這個網址要資料
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        
        // 2. 把伺服器回傳的資料轉成看得懂的 JSON 格式
        const data = await response.json();
        
        // 3. 成功拿到資料啦！把使用者的名字印在主控台上
        console.log("成功取得使用者資料：", data.name);
        
        // 甚至可以把它動態塞進畫面的標題裡！
        document.querySelector('#username').textContent = data.name;

    } catch (error) {
        // 如果網路斷線或網址打錯，就會落入這裡處理錯誤
        console.log("哎呀！抓取資料失敗了：", error);
    }
}

// 呼叫這支函式
fetchUserData();

1. fetch('網址')：就像是把服務生派出去點餐。
2. await：耐心地在原地等候（但不會卡死網頁），直到資料送達。
3. response.json()：把拿到的箱子拆開，變成 JS 看得懂的物件或陣列。
4. try...catch：就像防呆機制，萬一網路斷線或是伺服器爆炸時，才不會讓整個程式直接崩潰。

今日小結

今天我們跨出了前端最關鍵的一步——學會用 Fetch API 串接外部資料，讓網頁正式擁有和全世界伺服器對話的能力！

掌握了 API 資料串接後，明天我們要來結合前幾天學的「迴圈」與「DOM」，打造一個真實串接遠端資料的商品卡片列表！