隨記

Week 06 · Day 07 — 第六週總複習：HTTP 與服務

學習目標

  • 回顧 HttpClient、RxJS、錯誤處理、攔截器
  • 能串接後端 API
  • 完成並通過本週作業

重點速覽

  • HttpClient：get/post/put/patch/delete，回傳 Observable
  • Service 封裝：@Injectable({providedIn:'root'}) 將 API 集中管理
  • Operators：map/filter/switchMap/mergeMap/debounceTime 在 .pipe() 中
  • 錯誤處理：catchError/retry/throwError + 全域 ErrorHandler
  • 攔截器：HttpInterceptor + clone + setHeaders + multi:true

自我測驗

  1. http.get<User[]>() 回傳什麼型別？
  2. switchMap 與 mergeMap 差別？
  3. 為何攔截器改請求要用 clone()？
  4. HTTP_INTERCEPTORS 註冊時 multi: true 代表什麼？
答案 1. `Observable` 2. switchMap 取消舊串流保留最新；mergeMap 並行保留所有 3. HttpRequest 不可變，必須 clone 出新版 4. 允許多個攔截器

作業

第六週作業（README） - [ ] 建立 UserService ✅（get / create，含錯誤處理） - [ ] 練習 RxJS operators（map/filter/switchMap） - [ ] 實作 JWT 攔截器 ✅

實作檢核 - [ ] 元件透過 Service 取得並顯示後端資料 - [ ] 搜尋框用 debounceTime + switchMap 搜尋 - [ ] 請求自動帶上 Authorization token

總結

你的前端已能和後端對話，並有完善的錯誤處理與驗證。下一週深入元件的進階技巧。