HttpClient hoạt động như thế nào?

Question

Accepted Answer

**`HttpClient`** là service tích hợp sẵn của Angular để thực hiện các request HTTP. Nó trả về **Observable** (không phải Promise), tích hợp với các operator của RxJS, và hỗ trợ response có kiểu, interceptor, và xử lý lỗi. ## Sử dụng cơ bản ```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"); // có kiểu: Observable } createUser(user: User) { return this.http.post("/api/users", user); // body là đối số thứ 2 } deleteUser(id: number) { return this.http.delete(`/api/users/${id}`); } } ``` Generic (``) gán kiểu cho response. Các request là **lazy** — chúng chỉ kích hoạt khi được subscribe. ## Tiêu thụ trong một component ```ts ngOnInit() { this.userService.getUsers().subscribe(users => this.users = users); } // hoặc với pipe async (không cần subscribe/unsubscribe thủ công): users$ = this.userService.getUsers(); // template:

``` ## Tùy chọn request: 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}` }), }); ``` ## Xử lý lỗi với RxJS ```ts import { catchError, retry } from "rxjs/operators"; import { of } from "rxjs"; this.http.get("/api/users").pipe( retry(2), // thử lại request thất bại hai lần catchError(err => { console.error(err); return of([]); // giá trị dự phòng, giữ luồng sống }) ).subscribe(users => this.users = users); ``` Vì dựa trên Observable, bạn kết hợp retry, fallback, timeout, và biến đổi bằng các operator. ## Interceptor xử lý các mối quan tâm cắt ngang (cross-cutting) ```text HTTP interceptor tự động gắn token xác thực, log request, xử lý lỗi toàn cục, hoặc hiển thị spinner loading — cho TẤT CẢ request. ``` ## Tại sao điều này quan trọng `HttpClient` là cách các ứng dụng Angular giao tiếp với backend — có kiểu, dựa trên Observable, và kết hợp được với RxJS để retry/fallback/biến đổi. Bản chất Observable của nó (so với Promise của fetch) tích hợp nó với phần còn lại của Angular (pipe async, operator, interceptor). Biết các request có kiểu, các tùy chọn, xử lý lỗi, và kết hợp với pipe `async` bao quát hầu như mọi nhu cầu lấy dữ liệu trong Angular.