CHAPTER 20 · PRACTICE WORKSPACE

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

能顯示遠端資料及 loading、success、empty、error 四態

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

顯示 loading 狀態

修改檔案：script.js

完成後看見：按下載入後立即顯示讀取中

TASK-02本階段處理

讀取並解析 JSON

修改檔案：script.js

完成後看見：成功取得兩筆遠端格式資料

TASK-03稍後處理

呈現 loading、success、empty、error 四態

修改檔案：script.js

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

WORKSPACE

本階段實作區

已完成 TASK-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理：讀取並解析 JSON

修改：script.js

完成後：成功取得兩筆遠端格式資料

講解時展開：2 個小型比較

response vs JSON｜拿到回應不等於拿到資料

比較：fetch 回傳 response，還要解析 JSON body 才能取得可渲染的資料。

現在做：在 checkpoint-2/script.js 暫時把 requestItems() 的 return response.json() 改成 return response，重新整理後在 Console 執行 requestItems(successUrl).then(console.log)；觀察拿到的是 Response 物件而不是兩筆資料，再復原並重跑。

看預期與證據

預期：故障版會印出 Response 物件，沒有可直接使用的 title 陣列；復原後才得到兩筆物件，能說出 response 與 JSON body 是兩層不同結果。

證據：留下 Console 的 Response 物件與復原後陣列各一份證據，並標出 response.json() 的責任。

請求函式 vs render｜非同步邊界分開

比較：requestItems 負責取得資料，render 負責把資料變成安全畫面。

現在做：在 checkpoint-2/script.js 暫時把 requestItems() 的 return response.json() 改成 return response.json().then(renderItems)，重新整理後在 Console 呼叫 requestItems(successUrl)；觀察函式不再回傳資料而直接偷偷改畫面，再復原並重跑。

看預期與證據

預期：故障版會把請求函式和畫面副作用綁在一起，呼叫端拿不到兩筆資料；復原後 requestItems() 只回傳資料，renderItems() 由流程函式明確呼叫。

證據：用 Console 回傳值與畫面變化證明責任邊界，並指出復原後 requestItems() 沒有直接操作列表。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 按成功或失敗都先看到 loading，接著在 Console 執行 requestItems(successUrl)，確認目前仍回傳空陣列。
  2. B｜預測：在 DevTools Console 執行 requestItems(successUrl).then(console.log)，確認得到兩筆物件；此階段畫面仍只顯示讀取中，渲染留到下一步。
  3. C｜實作：在 script.js 的 requestItems() 完成「讀取並解析 JSON」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 requestItems() 與 script.js，最後重跑原操作。
  5. E｜驗收：成功取得兩筆遠端格式資料

完成條件：DONE-02：成功取得兩筆遠端格式資料

內建 JSON 練習

推薦閱讀

尚未載入

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「讀取並解析 JSON」。

前往 Checkpoint 2：完成 TASK-02

CHAPTER HANDOFF

從舊站事件讀碼走到非同步資料流程

接收第 19 章：保留 selector、事件、目前項目、class 與 aria 狀態的讀碼方法；本頁是獨立資料載入器，不共用第 19 章 FAQ 的 HTML。

交給第 21 章：完成後要能重用 requestItems()、response.ok、response.json()、安全 render 與 loading／success／empty／error 四態；第 21 章會把資料來源換成 Sheet／GAS，接著處理 rows 正規化，不重做本章四態基礎。前往第 21 章