HttpClient는 어떻게 동작하나요?

Question

Accepted Answer

**`HttpClient`**는 HTTP 요청을 보내기 위한 Angular의 내장 서비스입니다. (Promise가 아닌) **Observable**을 반환하고, RxJS 연산자와 통합되며, 타입이 지정된 응답, interceptor, 에러 처리를 지원합니다. ## 기본 사용법 ```ts import { HttpClient } from "@angular/common/http"; import { Injectable } from "@angular/core"; @Injectable({ providedIn: "root" }) export class UserService { constructor(private http: HttpClient) {} getUsers() { return this.http.get("/api/users"); // 타입 지정: Observable } createUser(user: User) { return this.http.post("/api/users", user); // 두 번째 인수가 body } deleteUser(id: number) { return this.http.delete(`/api/users/${id}`); } } ``` 제네릭(``)이 응답의 타입을 지정합니다. 요청은 **lazy**합니다. 구독될 때만 발생합니다. ## 컴포넌트에서 소비하기 ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // 또는 async pipe와 함께 (수동 구독/구독 해제 불필요): users$ = this.userService.getUsers(); // 템플릿:

``` ## 요청 옵션: params, headers ```ts import { HttpParams, HttpHeaders } from "@angular/common/http"; this.http.get("/api/users", { params: new HttpParams().set("page", "1").set("limit", "10"), // ?page=1&limit=10 headers: new HttpHeaders({ Authorization: `Bearer ${token}` }), }); ``` ## RxJS를 통한 에러 처리 ```ts import { catchError, retry } from "rxjs/operators"; import { of } from "rxjs"; this.http.get("/api/users").pipe( retry(2), // 실패한 요청을 두 번 재시도 catchError(err => { console.error(err); return of([]); // 대체 값, 스트림을 살아있게 유지 }) ).subscribe(users => this.users = users); ``` Observable 기반이므로, 연산자로 재시도, 대체 값, 타임아웃, 변환을 조합할 수 있습니다. ## interceptor는 횡단 관심사를 처리한다 ```text HTTP interceptor는 모든 요청에 대해 자동으로 인증 토큰을 첨부하고, 요청을 로깅하며, 에러를 전역적으로 처리하거나, 로딩 스피너를 표시한다. ``` ## 왜 중요한가 `HttpClient`는 Angular 앱이 백엔드와 통신하는 방법입니다. 타입이 지정되고, Observable 기반이며, RxJS로 재시도/대체/변환을 조합할 수 있습니다. 그 Observable 특성(fetch의 Promise와 대비)은 이를 Angular의 나머지 부분(async pipe, 연산자, interceptor)과 통합시킵니다. 타입 지정 요청, 옵션, 에러 처리, 그리고 `async` pipe와의 결합을 아는 것은 Angular의 거의 모든 데이터 가져오기 요구를 충족합니다.