零基礎前端課程

CHAPTER 20 · 180 MINUTES

API、JSON、非同步與錯誤狀態

Fetch 像叫外送：送出訂單、等待回應、拆開 JSON；店家休息或地址錯誤時，畫面也要清楚交代。

3種畫面狀態
3個明確任務
1套排錯順序

LEARNING GOALS

本章結束時，你能做出什麼

01

讓等待看得見

按下按鈕後立即顯示 loading，不讓使用者面對沉默畫面。

02

取得並解析資料

使用 fetch、response.ok 與 json() 接住回應。

03

完整收尾

成功顯示卡片，失敗顯示可理解訊息，不讓畫面卡在讀取中。

PROBLEM & ANALOGY

收到袋子，不代表餐點正確

第 19 章的 FAQ 資料已經放在頁面裡；本章把資料來源移到頁面外。request 是下單、endpoint 是店家地址、response 是送回來的袋子、JSON 是約定好的裝箱格式。

本章要解決：請求需要時間，而且 HTTP 404 也可能收到 response；不能只寫成功路線。

合回共同作品：完成的三態資料載入器會交給第 21 章 GAS 與第 22 章產品列表使用。

把名詞對回畫面與程式

loading
請求送出後立即告訴使用者正在處理。
fetch
向資料來源發出非同步請求。
response.json()
把回應解析成 JavaScript 資料。
render
把成功或空資料狀態更新到畫面。
error
網路、格式或服務失敗時的可理解結果。

SCOPE

今天的學習邊界

必會

能自己完成

request、response、JSON、async/await、try/catch 與 loading／success／error。

辨識

看得懂即可

HTTP status、Promise 與 CORS；知道它們影響請求，不展開內部機制。

不教

刻意延後

認證 token、OAuth、事件迴圈內部與複雜重試演算法。

CORE IDEAS

資料回來前後，各有責任

  1. 請求前先進入 loading，讓等待狀態可觀察。
  2. 收到 response 後先檢查 response.ok，再解析 JSON。
  3. requestItems() 負責請求；loadItems() 負責流程與畫面，不把責任擠成一行。
  4. 空資料是 empty；請求失敗是 error，兩者不能混成同一句訊息。

DEBUGGING

先看 Network 的事實，再修畫面

課堂刻意錯誤：把 endpoint 改成不存在的路徑製造 404；再讓回應是物件、render 卻期待陣列，觀察不同層的證據。

  1. 確認 click 事件有進入，而且 loading 立即出現。
  2. 到 Network 看 request URL、status 與 response preview。
  3. 確認有檢查 response.ok，再看解析後的資料型別與欄位。
  4. 檢查 render 是否收到陣列，catch 是否結束 loading 並顯示 error。
  5. 一次只修一處，重跑 success 與 error 兩條路線。
症狀 01

點擊後沒有讀取中

先查：檢查請求開始前是否先 render loading。

症狀 02

JSON 解析失敗

先查：在 Network 看實際回應是不是 JSON，不要只看 status 200。

症狀 03

錯誤時畫面空白

先查：確認錯誤分支寫入訊息並能再次嘗試。

PRACTICE CONTRACT

Starter 到 Solution 是同一份資料載入器

開始前先確認這四件事

  • 我已列出 loading、success、empty、error。
  • 我知道哪段負責 fetch、解析與 render。
  • 我會在 Network 看 status 與回應內容。
  • 我會測試成功、空資料與失敗。
TASK-01

顯示 loading 狀態

檔案：script.js

位置：setStatus()

結果：按下載入後立即顯示讀取中

TASK-02

讀取並解析 JSON

檔案：script.js

位置：requestItems()

結果：成功取得兩筆遠端格式資料

TASK-03

呈現 loading、success、empty、error 四態

檔案：script.js

位置：createItemCard()、renderItems()、loadItems()

結果：loading 立即出現，成功安全顯示卡片，空資料與失敗各有明確訊息

  1. 先讀任務 Starter 先讀三個缺口並預測狀態。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03，重跑三態。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

請求開始先顯示 ______；response 由 ______ 解析；資料交給 ______；失敗時顯示 ______。

不要用成功假畫面掩蓋失敗；截圖要標明資料來源是 mock 還是實際 API。

提交成功與失敗畫面各一張，並在 Network 截圖標出 URL 與 status；口述「request → response → JSON → render」順序。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：用 GAS 把試算表變成自己的資料出口，同時保留 mock 備援。