隨記

Week 06 · Day 02 — HttpClient：POST 與 Headers、錯誤處理

學習目標

  • 用 post 建立資料
  • 設定 HttpHeaders
  • 用 pipe + retry / catchError 處理失敗

重點

POST + Headers 

import { HttpHeaders } from '@angular/common/http';

createUser(user: User): Observable<User> {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  return this.http.post<User>(this.apiUrl, user, httpOptions);
}

錯誤處理 

import { throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.apiUrl)
    .pipe(
      retry(1),              // 失敗重試 1 次
      catchError(this.handleError)
    );
}

private handleError(error: any) {
  console.error('An error occurred:', error);
  return throwError(() => new Error('Something bad happened'));
}

觀念 - .pipe(運算子...)：串接 RxJS 運算子 - retry(n)：失敗後重試 - catchError(...)：攔截錯誤並轉換/處理 - throwError(...)：把錯誤往上游拋出，供呼叫者處理

實作

  1. 為 createUser 加 Content-Type: application/json
  2. 為 getUsers 加 retry(1) + catchError
  3. 用假的錯誤情境觀察 catchError 是否觸發

作業

  • 用 post 建立資料並設定 Headers
  • 用 retry 與 catchError 處理失敗
  • 說明 throwError 的作用