CHAPTER 20 · PRACTICE WORKSPACE

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

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

01 Starter 0/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 開始修改。

FOCUS TASK · TASK-01

現在只處理：顯示 loading 狀態

修改：script.js

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

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

loading vs result｜非同步先說明等待

比較：請求尚未完成時先顯示 loading，不能讓畫面看起來像沒有反應。

現在做：在 checkpoint-1/script.js 暫時把 loadItems() 的 setStatus("讀取中…", "loading") 改成 setStatus("尚未完成載入流程")，重新整理後按「成功載入」；記下等待期間不再可見，再復原程式並重跑。

看預期與證據

預期：故障版會讓畫面停在「尚未完成載入流程」；復原後才會在請求開始前顯示「讀取中…」，能說出 loading 是等待中的可見契約。

證據：留下故障版與復原版各一張截圖，並口述「按下按鈕 → loading → 後續結果」的差異。

狀態文字 vs 資料卡片｜先後順序不同

比較：setStatus 負責說明流程狀態，卡片負責呈現資料；成功後才交換內容。

現在做：在 checkpoint-1/script.js 暫時把 loadItems() 的 setStatus("讀取中…", "loading") 改成只寫 status.className = "status--loading"，重新整理後按「成功載入」；觀察樣式變了但文字仍是「尚未載入」，再復原並重跑。

看預期與證據

預期：故障版會只有 loading 樣式、沒有 loading 文字；能指出 setStatus() 負責狀態文字與樣式，資料卡片則由後續 render 責任處理。

證據：用故障版畫面與復原版畫面比較文字／樣式，並指出兩者不是同一個 DOM 責任。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 開啟 Network 與 Console，按任一載入按鈕，確認狀態只顯示「尚未完成載入流程」且 Network 沒有資料請求。
  2. B｜預測：按下「成功載入」或「模擬失敗」，確認畫面會立即顯示「讀取中…」；這一步尚未真的發出請求。
  3. C｜實作：在 script.js 的 setStatus() 完成「顯示 loading 狀態」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 setStatus() 與 script.js，最後重跑原操作。
  5. E｜驗收：按下載入後立即顯示讀取中

完成條件：DONE-01：按下載入後立即顯示讀取中

內建 JSON 練習

推薦閱讀

尚未載入

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「顯示 loading 狀態」。

前往 Checkpoint 1：完成 TASK-01

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 章