LESSON-18 · TOPIC 04
能在逾時時中止工作，將 AbortError 分類成 timeout，並保證 finally 恢復按鈕與 busy 狀態。
能在逾時時中止工作，將 AbortError 分類成 timeout，並保證 finally 恢復按鈕與 busy 狀態。
fetch 沒有教材層可控的等待上限時，介面可能永久卡在送出中；把所有錯誤都叫網路錯誤又會給錯誤修復指引。
要修改的檔案：files/starter/main.js
定位：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。｜依 module-4 定位，只修改「AbortController timeout 與錯誤分類」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
測試部署沒有回應，表單永遠顯示『送出中』且按鈕不能再操作。
起始狀態：status=idle、按鈕可用，模擬工作延遲大於 timeout。
aborted=true、category=timeout、finalState=idle、buttonRestored=true。
驗收證據：aborted=true、category=timeout、finalState=idle、buttonRestored=true
fetch、可取消搜尋、頁面切換後不再需要的 request，以及需明確 timeout UI 的表單。
常見混淆：abort 是客戶端停止等待的訊號，不保證伺服器尚未收到或未處理 request；後端仍需冪等。
這段程式是理解起點，不是要你直接跳過 Starter。
等太久就發出停止訊號；抓到這個停止原因時告訴使用者是逾時，最後一定把按鈕還回來。
正式說法：AbortController.abort() 將 signal 設為 aborted；支援 signal 的非同步工作以 AbortError 拒絕，catch 可分類，finally 無條件執行清理。
const controller=new AbortController(); const timer=setTimeout(()=>controller.abort(), 1000); try { await fetch(url,{signal:controller.signal}); } catch(error) { if(error.name==='AbortError') category='timeout'; } finally { clearTimeout(timer); restore(); }每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/main.js 定位：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。」目前的缺口。
證據：保存 files/starter/main.js 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/main.js，且定位到 先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。。
檔案：files/starter/main.js 定位：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。
要做：讓本機模擬工作超過 timeout，確認 signal 中止、catch 分類 timeout，並由 finally 恢復 idle/按鈕。
預期：aborted=true、category=timeout、finalState=idle、buttonRestored=true。
證據：aborted=true、category=timeout、finalState=idle、buttonRestored=true
卡住先查：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。
檔案：files/starter/main.js 定位：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：aborted=true、category=timeout、finalState=idle、buttonRestored=true。
證據：aborted=true、category=timeout、finalState=idle、buttonRestored=true
卡住先查：先分別記錄 timer 是否觸發、signal.aborted、error.name 與 finally 是否執行。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
timeout 應呼叫 controller.abort()，不能只把畫面文字改成逾時。
在 catch 依 error.name 分類，在 finally clearTimeout 並恢復 UI。
完整解答與原因：timer 先呼叫 abort，使支援 signal 的工作以 AbortError 拒絕；catch 將它分類 timeout，finally 無論成功失敗都恢復 idle 與按鈕。