CHAPTER 20 · PRACTICE WORKSPACE

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

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：呈現 loading、success、empty、error 四態

修改：script.js

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

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

empty vs error｜沒有資料不等於請求失敗

比較：空陣列代表成功但沒有內容，錯誤代表請求或解析失敗；使用者訊息要不同。

現在做：在 solution/script.js 暫時把 renderItems() 的 if (items.length === 0) 分支改成 throw new Error("把 empty 當 error")，按「模擬空資料」；觀察空陣列被錯誤訊息取代，再復原並重跑成功、空資料與失敗三條路線。

看預期與證據

預期：故障版會把「成功但沒有資料」誤判成 error；復原後空資料顯示「目前沒有資料。」、404 顯示載入失敗，兩種訊息不同。

證據：留下空資料故障版與復原版的狀態文字，並完成 success／empty／error 對照表。

安全文字節點 vs HTML 字串｜資料不能直接當標記

比較：遠端資料應以安全文字節點呈現，避免把資料誤當成 HTML。

現在做：在 solution/script.js 暫時把 createItemCard() 的 title.textContent 改成 title.innerHTML，重新整理後在 Console 執行 renderItems([{ title: '<img id="unsafe-node" src=x>外來文字' }])；確認 DOM 產生 img，再復原並重跑。

看預期與證據

預期：故障版會把外來字串當成 HTML 節點；復原後只留下文字，不會產生 #unsafe-node，能說出遠端資料必須走 textContent 或等價的安全文字節點。

證據：用 document.querySelector('#unsafe-node') 的故障／復原結果與畫面截圖證明安全渲染責任。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 確認 requestItems 可解析成功、空資料與 404，但按鈕後畫面仍未將結果分流為 success、empty、error。
  2. B｜預測：依序按「成功載入」、「模擬空資料」、「模擬失敗」；每次先確認 loading，再確認兩張卡、空資料提示或 404 錯誤。另以 Console 傳入含 HTML 的 title，確認只顯示文字。
  3. C｜實作：在 script.js 的 createItemCard()、renderItems()、loadItems() 完成「呈現 loading、success、empty、error 四態」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 createItemCard()、renderItems()、loadItems() 與 script.js，最後重跑原操作。
  5. E｜驗收：loading、success、empty、error 四態均可控重現，外來文字不會被當成 HTML

完成條件：DONE-03：loading 立即出現，成功安全顯示卡片，空資料與失敗各有明確訊息；loading、success、empty、error 四態均可控重現，外來文字不會被當成 HTML

內建 JSON 練習

推薦閱讀

尚未載入

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「呈現 loading、success、empty、error 四態」。

前往 Solution：完成 TASK-03

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 章