讓等待看得見
按下按鈕後立即顯示 loading，不讓使用者面對沉默畫面。
CHAPTER 20 · 180 MINUTES
API、JSON、非同步與錯誤狀態
Fetch 像叫外送：送出訂單、等待回應、拆開 JSON；店家休息或地址錯誤時，畫面也要清楚交代。
3種畫面狀態
3個明確任務
1套排錯順序
LEARNING GOALS
本章結束時，你能做出什麼
取得並解析資料
使用 fetch、response.ok 與 json() 接住回應。
完整收尾
成功顯示卡片，失敗顯示可理解訊息，不讓畫面卡在讀取中。
進場檢核與作品接力
可觀察目標：按下載入後立即顯示讀取中；成功取得兩筆遠端格式資料；loading、success、empty、error 四態均可控重現，外來文字不會被當成 HTML。
- 具備第 19 章成果：能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded：不看答案，展示或口述第 19 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 19 章產物：能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded
本章輸出：能顯示遠端資料及 loading、success、empty、error 四態
產物類型：mainline；後續用途：第 21 章、第 22 章
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／empty／error 四態。
看得懂即可
HTTP status、Promise 與 CORS；知道它們影響請求，不展開內部機制。
刻意延後
認證 token、OAuth、事件迴圈內部與複雜重試演算法。
CORE IDEAS
資料回來前後，各有責任
- 請求前先進入 loading，讓等待狀態可觀察。
- 收到 response 後先檢查
response.ok，再解析 JSON。 requestItems()負責請求；loadItems()負責流程與畫面，不把責任擠成一行。- 空資料是 empty；請求失敗是 error，兩者不能混成同一句訊息。
DEBUGGING
先看 Network 的事實，再修畫面
課堂刻意錯誤：把 endpoint 改成不存在的路徑製造 404；再讓回應是物件、render 卻期待陣列，觀察不同層的證據。
- 確認 click 事件有進入，而且 loading 立即出現。
- 到 Network 看 request URL、status 與 response preview。
- 確認有檢查
response.ok，再看解析後的資料型別與欄位。 - 檢查 render 是否收到陣列，catch 是否結束 loading 並顯示 error。
- 一次只修一處，重跑 success 與 error 兩條路線。
點擊後沒有讀取中
先查：檢查請求開始前是否先 render loading。
JSON 解析失敗
先查：在 Network 看實際回應是不是 JSON，不要只看 status 200。
錯誤時畫面空白
先查：確認錯誤分支寫入訊息並能再次嘗試。
PRACTICE CONTRACT
Starter 到 Solution 是同一份資料載入器
開始前先確認這四件事
- 我已列出 loading、success、empty、error。
- 我知道哪段負責 fetch、解析與 render。
- 我會在 Network 看 status 與回應內容。
- 我會測試成功、空資料與失敗。
顯示 loading 狀態
檔案：script.js
位置：setStatus()
結果：按下載入後立即顯示讀取中
讀取並解析 JSON
檔案：script.js
位置：requestItems()
結果：成功取得兩筆遠端格式資料
呈現 loading、success、empty、error 四態
檔案：script.js
位置：createItemCard()、renderItems()、loadItems()
結果：loading 立即出現，成功安全顯示卡片，空資料與失敗各有明確訊息
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
請求開始先顯示 ______；response 由 ______ 解析；資料交給 ______；失敗時顯示 ______。
不要用成功假畫面掩蓋失敗；截圖要標明資料來源是 mock 還是實際 API。
提交成功與失敗畫面各一張，並在 Network 截圖標出 URL 與 status；口述「request → response → JSON → render」順序。
下一章：用 GAS 把試算表變成自己的資料出口，同時保留 mock 備援。
階段關卡提交：先填需求拆解、證據清單與同儕回饋，再用四級 rubric 自評；第 3 級才算通過。開啟學生提交包