HttpClient

Mục lụcCopy Anchor Link

• Bức tranh tổng quan
  • HttpClient nằm ở đâu
  • Vòng đời của một request
• Cấu hình HttpClient
  • Đăng ký provider toàn ứng dụng
  • Chọn backend Fetch
• Gửi request và nhận response có kiểu
  • Đặt HTTP ở data-access service
  • Đọc body hoặc toàn bộ response
  • Generic không xác thực dữ liệu lúc chạy
• Query params, headers và body
  • HttpParams và HttpHeaders là immutable
  • Tạo request danh sách có lọc
  • Khi nào đặt header ở request
• Hủy request và quản lý vòng đời
  • Hủy request cũ bằng switchMap
  • Gắn subscription imperative với DestroyRef
  • Hủy ở client không hoàn tác server
• Theo dõi tiến trình upload và download
  • Nhận HttpEvent thay vì chỉ body
  • Giới hạn của progress
• Resource layer cho dữ liệu đọc
  • Khi resource là mô hình phù hợp
  • resource với Promise và AbortSignal
  • rxResource với HttpClient
  • Giới hạn của resource
• Lỗi thường gặp và trade-off
• Checklist và tóm tắt

Bức tranh tổng quanCopy Anchor Link

HttpClient là service Angular dùng để gửi HTTP request và nhận response dưới dạng Observable. Nó đóng gói các chi tiết trình duyệt như serialize body, parse JSON, hủy request khi unsubscribe và chuỗi interceptor. Component không cần biết các chi tiết đó để render dữ liệu.

HttpClient nằm ở đâuCopy Anchor Link

Đặt URL, DTO và phép ánh xạ dữ liệu tại một data-access service hoặc repository. Component chỉ yêu cầu một ý nghĩa nghiệp vụ như “lấy danh sách công việc”, thay vì tự ghép URL và đọc JSON thô. Ranh giới này làm API dễ thay đổi và dễ kiểm thử hơn.

direction: right

page: "Page / facade\nState + UI" {
  width: 130
  height: 58
}

api: "TaskApi\nDTO → app model" {
  width: 144
  height: 58
}

page -> api: "loadTasks()"
api -> page: "Task[]"

direction: right

api: "TaskApi" {
  width: 130
  height: 58
}

http: "HttpClient\nInterceptor +\ntransport" {
  width: 130
  height: 79
}

backend: "Backend API" {
  width: 130
  height: 58
}

api <-> http
http <-> backend

DTO (Data Transfer Object) là hình dạng dữ liệu ở biên API. Model của ứng dụng có thể khác DTO. Chẳng hạn backend trả created_at là chuỗi ISO, còn giao diện cần createdAt: Date. Ánh xạ một lần ở TaskApi giúp phần còn lại của ứng dụng không phụ thuộc vào cách backend đặt tên trường.

Vòng đời của một requestCopy Anchor Link

HttpClient.get() chưa gửi request ngay. Nó trả về một cold Observable, nghĩa là mỗi lần có consumer subscribe thì một request mới được tạo. Với request HTTP thông thường, Observable phát response rồi complete.

1. Consumer subscribe trực tiếp, dùng AsyncPipe, hoặc được rxResource subscribe.
2. Angular tạo request; interceptor có thể clone và bổ sung metadata trước khi transport gửi đi.
3. Backend trả response hoặc lỗi. HttpClient parse body theo responseType và phát kết quả.
4. Consumer nhận dữ liệu. Khi request hoàn tất, subscription tự kết thúc; nếu unsubscribe sớm, Angular hủy request phía client khi transport hỗ trợ.

Cấu hình HttpClientCopy Anchor Link

Trước khi inject HttpClient, ứng dụng phải đăng ký các provider của nó. Với ứng dụng standalone hiện đại, thực hiện việc này trong cấu hình bootstrap, không phải trong imports của component.

Đăng ký provider toàn ứng dụngCopy Anchor Link

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
  ],
};

provideHttpClient() đăng ký HttpClient ở application injector. Vì vậy mọi service được tạo trong cây injector ứng dụng đều có thể inject(HttpClient). Chỉ đăng ký một lần ở cấp ứng dụng trừ khi có một ranh giới injector rất chủ đích.

Nếu cần interceptor hàm, cấu hình chúng cùng provider. Không tự thêm Authorization vào từng service; chính sách chung thuộc interceptor.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './core/http/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
};

Chọn backend FetchCopy Anchor Link

Mặc định, Angular có backend HTTP phù hợp cho đa số ứng dụng. Có thể chọn Fetch API bằng withFetch() khi dự án cần khả năng tương thích Fetch, đặc biệt khi dùng SSR.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withFetch())],
};

Fetch không phải là “nhanh hơn” trong mọi tình huống. Một trade-off quan trọng là backend Fetch không cung cấp upload progress events. Nếu UI cần thanh tiến trình upload bằng HttpEventType.UploadProgress, đừng bật withFetch() cho client đó; dùng backend mặc định dựa trên XHR.

Gửi request và nhận response có kiểuCopy Anchor Link

Một generic như get<TaskDto[]>() giúp TypeScript biết body mà mã gọi kỳ vọng nhận được. Nhờ đó, IDE kiểm tra tên trường và Observable có kiểu đúng. Generic không thay đổi JSON từ server và không tự kiểm tra JSON có đúng schema hay không.

Đặt HTTP ở data-access serviceCopy Anchor Link

Ví dụ dưới đây tách DTO khỏi model dùng trong ứng dụng. map là RxJS operator chuyển từng giá trị của Observable; ở đây HTTP chỉ phát một danh sách rồi hoàn tất.

Đọc theo ba bước: contract ở biên, ánh xạ model, rồi request Observable. Viewer chỉ dẫn đọc code, không gửi HTTP request.

1import { HttpClient } from '@angular/common/http';2import { Injectable, inject } from '@angular/core';3import { Observable, map } from 'rxjs';45interface TaskDto {6  id: string;7  title: string;8  done: boolean;9  created_at: string;10}1112export interface Task {13  id: string;14  title: string;15  completed: boolean;16  createdAt: Date;17}1819function toTask(dto: TaskDto): Task {20  return {21    id: dto.id,22    title: dto.title,23    completed: dto.done,24    createdAt: new Date(dto.created_at),25  };26}2728@Injectable({ providedIn: 'root' })29export class TaskApi {30  private readonly http = inject(HttpClient);31  private readonly baseUrl = '/api/tasks';3233  getAll(): Observable<Task[]> {34    return this.http35      .get<TaskDto[]>(this.baseUrl)36      .pipe(map((dtos) => dtos.map(toTask)));37  }38}

Component hoặc facade nên dùng TaskApi.getAll() thay vì gọi HttpClient trực tiếp. Khi endpoint đổi từ /api/tasks sang /v2/tasks, hoặc DTO đổi tên trường, thay đổi chỉ tập trung tại lớp này.

Đọc body hoặc toàn bộ responseCopy Anchor Link

Mặc định, HttpClient chỉ phát body đã parse. Đây là lựa chọn đúng cho phần lớn request đọc dữ liệu.

getTask(id: string): Observable<Task> {
  return this.http
    .get<TaskDto>(`${this.baseUrl}/${encodeURIComponent(id)}`)
    .pipe(map(toTask));
}

Khi cần status code hoặc header như ETag, đặt observe: 'response'. Khi đó kết quả là HttpResponse<T> thay vì T.

import { HttpResponse } from '@angular/common/http';
import { Observable, map } from 'rxjs';

interface CreateTaskCommand {
  title: string;
}

interface CreatedTask {
  task: Task;
  etag: string | null;
}

create(command: CreateTaskCommand): Observable<CreatedTask> {
  return this.http
    .post<TaskDto>(this.baseUrl, command, { observe: 'response' })
    .pipe(
      map((response: HttpResponse<TaskDto>) => {
        if (response.body === null) {
          throw new Error('API trả response thành công nhưng không có body.');
        }

        return {
          task: toTask(response.body),
          etag: response.headers.get('ETag'),
        };
      }),
    );
}

Đây là hai response minh họa cho cùng thao tác tạo task: 201 có body và ETag, còn 400 đi vào error channel. Viewer không gọi backend. Trong trình duyệt gọi khác origin, backend còn phải expose ETag qua CORS thì response.headers.get('ETag') mới đọc được.

{
  "title": "Học HttpClient"
}

{
  "id": "task-1",
  "title": "Học HttpClient",
  "done": false,
  "created_at": "2026-03-01T08:00:00Z"
}

{
  "title": ""
}

{
  "code": "VALIDATION_ERROR",
  "field": "title"
}

post, put, patch và delete cũng nhận generic cho kiểu body response. DELETE không phải lúc nào cũng trả body. Nếu API trả 204 No Content, hãy để method trả Observable<void> hoặc xử lý response rỗng theo đúng hợp đồng, thay vì ép nó thành một object giả.

Một endpoint không trả JSON cần responseType tương ứng. Giá trị literal 'text' giúp overload của TypeScript chọn đúng kiểu trả về.

healthCheck(): Observable<string> {
  return this.http.get('/api/health', { responseType: 'text' });
}

Generic không xác thực dữ liệu lúc chạyCopy Anchor Link

Đoạn sau vẫn biên dịch, kể cả khi backend thực tế trả { message: 'maintenance' } thay vì TaskDto[].

const tasks$ = this.http.get<TaskDto[]>('/api/tasks');

Lỗi chỉ lộ ra khi mã truy cập task.title hoặc khi mapping dữ liệu. Với API do nhóm khác vận hành hoặc dữ liệu nhạy cảm, hãy xác thực ở runtime tại ranh giới bằng schema validator, hoặc ít nhất kiểm tra các trường quan trọng trước khi đưa vào state.

function isTaskDto(value: unknown): value is TaskDto {
  if (typeof value !== 'object' || value === null) return false;

  const task = value as Record<string, unknown>;
  return (
    typeof task['id'] === 'string' &&
    typeof task['title'] === 'string' &&
    typeof task['done'] === 'boolean' &&
    typeof task['created_at'] === 'string'
  );
}

Không cần tự viết validator sâu cho mọi endpoint nhỏ. Điểm cần nhớ là T là contract tĩnh phía client, không phải hàng rào bảo vệ ở runtime. Với dữ liệu quan trọng, hãy có một hàng rào runtime rõ ràng.

Query params, headers và bodyCopy Anchor Link

Request không chỉ gồm method và URL. Query params mô tả lọc, phân trang hoặc sắp xếp; headers mô tả metadata như định dạng nhận, locale hoặc correlation ID; body mang command của POST, PUT hoặc PATCH.

HttpParams và HttpHeaders là immutableCopy Anchor Link

HttpParams và HttpHeaders không bị sửa tại chỗ. set() và append() trả về object mới. Đây là lỗi rất hay gặp:

Diff dưới đây chỉ thay việc giữ giá trị trả về; không thay URL hay contract phân trang.

Gán lại kết quả hoặc chain các lời gọi:

const params = new HttpParams()
  .set('page', '1')
  .set('pageSize', '20')
  .append('tag', 'angular')
  .append('tag', 'http');

const headers = new HttpHeaders()
  .set('Accept', 'application/json')
  .set('X-Client-Version', '2026.03');

Dùng append() khi server hiểu cùng một key xuất hiện nhiều lần, ví dụ ?tag=angular&tag=http. Nếu backend yêu cầu tags=angular,http, hãy gửi đúng chuỗi mà hợp đồng API quy định; Angular không thể tự đoán quy ước mảng của backend.

Tạo request danh sách có lọcCopy Anchor Link

Ví dụ này chỉ thêm query param khi người dùng thực sự nhập giá trị. encodeURIComponent không cần dùng cho giá trị đưa vào HttpParams; Angular sẽ encode query string. Còn khi chèn ID vào URL path, hãy dùng encodeURIComponent như ví dụ getTask() ở trên.

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, map } from 'rxjs';

interface TaskQuery {
  page: number;
  pageSize: number;
  search?: string;
  completed?: boolean;
  tags: string[];
}

interface TaskPageDto {
  items: TaskDto[];
  total: number;
}

interface TaskPage {
  items: Task[];
  total: number;
}

list(query: TaskQuery): Observable<TaskPage> {
  let params = new HttpParams()
    .set('page', String(query.page))
    .set('pageSize', String(query.pageSize));

  if (query.search?.trim()) {
    params = params.set('search', query.search.trim());
  }

  if (query.completed !== undefined) {
    params = params.set('completed', String(query.completed));
  }

  for (const tag of query.tags) {
    params = params.append('tag', tag);
  }

  const headers = new HttpHeaders().set('Accept-Language', 'vi');

  return this.http
    .get<TaskPageDto>(this.baseUrl, { params, headers })
    .pipe(
      map((page) => ({
        total: page.total,
        items: page.items.map(toTask),
      })),
    );
}

HttpClient sẽ serialize object body JSON khi request phù hợp. Đừng tự gọi JSON.stringify() cho object thông thường trừ khi backend yêu cầu body text thô. Với file, dùng FormData; trình duyệt tự tạo Content-Type kèm boundary.

uploadAttachment(taskId: string, file: File) {
  const body = new FormData();
  body.append('file', file, file.name);

  return this.http.post(
    `${this.baseUrl}/${encodeURIComponent(taskId)}/attachments`,
    body,
  );
}

Khi nào đặt header ở requestCopy Anchor Link

Đặt header ngay tại request khi nó là dữ liệu riêng của use case, chẳng hạn If-Match chứa ETag mà người dùng vừa đọc để chống ghi đè đồng thời.

update(id: string, command: CreateTaskCommand, etag: string): Observable<Task> {
  const headers = new HttpHeaders().set('If-Match', etag);

  return this.http
    .patch<TaskDto>(`${this.baseUrl}/${encodeURIComponent(id)}`, command, { headers })
    .pipe(map(toTask));
}

Đặt header ở interceptor khi nó là chính sách dùng chung, như Authorization, request ID, locale toàn ứng dụng hoặc logging. Không gửi token cho mọi URL một cách vô điều kiện; interceptor cần giới hạn origin/endpoint tin cậy. Xem Interceptors để thiết kế lớp này.

Hủy request và quản lý vòng đờiCopy Anchor Link

Hủy request không phải là xử lý lỗi. Nó là cách nói rằng consumer không còn cần kết quả nữa, ví dụ người dùng đã gõ từ khóa mới hoặc rời màn hình. Với HttpClient, unsubscribe trước khi response về sẽ yêu cầu transport hủy request phía client.

Hủy request cũ bằng switchMapCopy Anchor Link

Tìm kiếm là trường hợp điển hình. switchMap chỉ giữ inner Observable mới nhất. Khi query phát giá trị mới, nó unsubscribe request cũ trước khi bắt đầu request mới.

import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, Subject, debounceTime, distinctUntilChanged, switchMap } from 'rxjs';

interface SearchResultDto {
  id: string;
  title: string;
}

export class TaskSearchStore {
  private readonly queryInput = new Subject<string>();

  readonly results$: Observable<SearchResultDto[]> = this.queryInput.pipe(
    debounceTime(250),
    distinctUntilChanged(),
    switchMap((query) => {
      const params = new HttpParams().set('q', query);
      return this.http.get<SearchResultDto[]>('/api/tasks/search', { params });
    }),
  );

  constructor(private readonly http: HttpClient) {}

  search(query: string): void {
    this.queryInput.next(query);
  }
}

Nếu dùng mergeMap, mọi request được giữ và response cũ có thể đến sau response mới rồi ghi đè UI. concatMap xếp request vào hàng đợi, phù hợp khi thứ tự ghi phải được giữ, nhưng thường làm tìm kiếm chậm. Với search-as-you-type, debounceTime + distinctUntilChanged + switchMap là điểm bắt đầu hợp lý.

Gắn subscription imperative với DestroyRefCopy Anchor Link

HTTP Observable đơn thường tự complete, nên không phải lúc nào cũng cần teardown riêng. Tuy nhiên stream ngoài trong ví dụ tìm kiếm có Subject và có thể sống lâu. Nếu class phải subscribe() để thực hiện side effect, gắn subscription với vòng đời của component/facade bằng takeUntilDestroyed.

import { DestroyRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class TaskSearchPage {
  private readonly destroyRef = inject(DestroyRef);
  private readonly store = inject(TaskSearchStore);

  ngOnInit(): void {
    this.store.results$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((results) => {
        // Ví dụ: đồng bộ một API imperative, không phải state template.
        console.log(`Nhận ${results.length} kết quả`);
      });
  }
}

Nếu chỉ hiển thị Observable trong template, ưu tiên AsyncPipe; nó subscribe và unsubscribe theo vòng đời view. Nếu chỉ cần state mới nhất, cân nhắc toSignal, resource hoặc rxResource thay vì một subscription thủ công.

Hủy ở client không hoàn tác serverCopy Anchor Link

Việc hủy có thể ngăn browser chờ response và tiết kiệm tài nguyên client. Nó không bảo đảm server chưa nhận request hoặc chưa bắt đầu ghi dữ liệu. Vì vậy:

• Dùng cancellation mạnh cho request đọc có thể thay thế, như tìm kiếm hoặc đổi trang chi tiết.
• Không coi cancellation là nút “undo” cho POST hoặc PATCH.
• Với command ghi có thể bị gửi lại do retry, thiết kế idempotency key hoặc cơ chế chống trùng ở server.
• UI cần xử lý trạng thái gửi dữ liệu rõ ràng, thay vì giả định request bị hủy thì không có tác dụng.

Theo dõi tiến trình upload và downloadCopy Anchor Link

Một request mặc định chỉ phát body cuối cùng. Để render tiến trình, yêu cầu HttpClient phát toàn bộ các HttpEvent bằng observe: 'events' và bật reportProgress.

Nhận HttpEvent thay vì chỉ bodyCopy Anchor Link

Ví dụ upload file dưới đây cập nhật phần trăm khi có event upload và xử lý response cuối cùng riêng biệt.

import {
  HttpClient,
  HttpEvent,
  HttpEventType,
  HttpResponse,
} from '@angular/common/http';
import { Observable, filter, map, tap } from 'rxjs';

interface UploadReceipt {
  attachmentId: string;
  url: string;
}

upload(file: File): Observable<UploadReceipt> {
  const body = new FormData();
  body.append('file', file, file.name);

  return this.http
    .post<UploadReceipt>('/api/attachments', body, {
      observe: 'events',
      reportProgress: true,
    })
    .pipe(
      tap((event: HttpEvent<UploadReceipt>) => {
        if (event.type === HttpEventType.UploadProgress) {
          const total = event.total;
          const percent = total ? Math.round((event.loaded * 100) / total) : undefined;
          // Cập nhật signal/state UI bằng percent; undefined nghĩa là server không báo total.
          console.log('Upload progress:', percent);
        }
      }),
      filter(
        (event): event is HttpResponse<UploadReceipt> =>
          event.type === HttpEventType.Response,
      ),
      map((response) => {
        if (response.body === null) {
          throw new Error('Upload hoàn tất nhưng API không trả biên nhận.');
        }
        return response.body;
      }),
    );
}

HttpEventType.Response là event cuối chứa HttpResponse<T>. Ngoài UploadProgress, Angular còn có DownloadProgress, Sent và ResponseHeader. Chỉ xử lý event mà UI thực sự cần; đừng giả định mọi transport hoặc server đều phát đủ các mốc này.

Giới hạn của progressCopy Anchor Link

event.total có thể là undefined, ví dụ server không gửi Content-Length hoặc response dùng streaming/chunked transfer. Trong trường hợp đó, hiển thị spinner hay nhãn “Đang tải…” thay vì phần trăm giả.

Upload progress phụ thuộc vào XHR backend. Như đã nêu ở phần cấu hình, withFetch() không hỗ trợ UploadProgress. Download progress cũng không nói rằng server đã xử lý xong nghiệp vụ; nó chỉ mô tả số byte client đã nhận.

Resource layer cho dữ liệu đọcCopy Anchor Link

resource và rxResource tổ chức một request đọc thành state có vòng đời: có params đầu vào, đang tải, giá trị, lỗi và khả năng reload. Chúng hợp với màn hình “đọc bản ghi theo key”, nơi UI chủ yếu cần snapshot mới nhất chứ không cần xử lý từng event trong stream.

Khi resource là mô hình phù hợpCopy Anchor Link

Ví dụ trang chi tiết sản phẩm có productId. Mỗi giá trị ID tương ứng một dữ liệu hiện tại. Khi ID đổi, resource tải dữ liệu mới; UI đọc isLoading(), hasValue() và error() trực tiếp. Sơ đồ có thể zoom/pan để theo dõi nhánh hủy request cũ, rồi Fit để quay lại toàn cảnh. Đây là quan hệ logic, không phải trace thời gian.

direction: right

id: "productId() đổi" {
  width: 144
  height: 58
}

params: "params() tạo key mới" {
  width: 184
  height: 58
}

loader: "Loader / stream mới" {
  width: 176
  height: 58
}

cancel: "Hủy request cũ" {
  width: 136
  height: 58
}

state: "value, error,\nisLoading" {
  width: 130
  height: 58
}

ui: "Template render\nstate mới" {
  width: 144
  height: 58
}

id -> params -> loader -> state -> ui
loader -> cancel

Resource không phải cache toàn ứng dụng hoặc thay thế chung cho RxJS. Nó quản lý state async của một resource instance. Chính sách cache, invalidation sau mutation và phối hợp nhiều consumer vẫn cần được thiết kế ở service/store phù hợp.

resource với Promise và AbortSignalCopy Anchor Link

resource dùng loader trả Promise. Angular truyền abortSignal cho loader để request cũ có thể dừng khi params đổi hoặc resource bị hủy. fetch hiểu signal này trực tiếp.

import { Component, resource, signal } from '@angular/core';

interface ProductDto {
  id: string;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-detail',
  template: `
    @if (product.isLoading()) {
      <p>Đang tải sản phẩm...</p>
    } @else if (product.hasValue()) {
      <h2>{{ product.value().name }}</h2>
      <p>{{ product.value().price }}</p>
    } @else if (product.error()) {
      <p>Không thể tải sản phẩm.</p>
    }
  `,
})
export class ProductDetailComponent {
  readonly productId = signal<string | undefined>(undefined);

  readonly product = resource({
    params: () => {
      const id = this.productId();
      return id ? { id } : undefined;
    },
    loader: async ({ params, abortSignal }) => {
      const response = await fetch(
        `/api/products/${encodeURIComponent(params.id)}`,
        { signal: abortSignal },
      );

      if (!response.ok) {
        throw new Error(`Không thể tải sản phẩm: HTTP ${response.status}`);
      }

      return response.json() as Promise<ProductDto>;
    },
  });
}

Khi params() trả undefined, resource không có yêu cầu hợp lệ để tải. Khi productId được đặt, loader chạy. reload() yêu cầu tải lại; hasValue() vừa kiểm tra dữ liệu vừa giúp TypeScript biết có thể đọc value() trong nhánh đó.

Trade-off của resource dùng fetch là request không đi qua interceptor của HttpClient. Nếu authentication, tracing hoặc quy tắc lỗi của ứng dụng được tập trung ở interceptor, dùng fetch riêng dễ làm lệch chính sách. Đừng trộn hai đường HTTP chỉ vì API resource tiện.

rxResource với HttpClientCopy Anchor Link

rxResource giữ giao diện state của resource nhưng loader là Observable. Đây là lựa chọn tự nhiên khi data-access service đã dùng HttpClient, vì request vẫn đi qua interceptor và được hủy khi resource thay params.

import { HttpClient } from '@angular/common/http';
import { Component, inject, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';

interface Product {
  id: string;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-detail',
  template: `
    @if (product.isLoading()) {
      <p>Đang tải sản phẩm...</p>
    } @else if (product.hasValue()) {
      <h2>{{ product.value().name }}</h2>
    } @else if (product.error()) {
      <p>Không thể tải sản phẩm.</p>
    }
  `,
})
export class ProductDetailComponent {
  private readonly http = inject(HttpClient);

  readonly productId = signal<string | undefined>(undefined);

  readonly product = rxResource({
    params: () => {
      const id = this.productId();
      return id ? { id } : undefined;
    },
    stream: ({ params }) =>
      this.http
        .get<ProductDto>(`/api/products/${encodeURIComponent(params.id)}`)
        .pipe(map((dto) => ({ ...dto }))),
  });
}

Khi params đổi, rxResource unsubscribe stream cũ trước khi dùng stream mới. Với HttpClient, unsubscribe này yêu cầu hủy HTTP request phía client. Giống mọi generic HttpClient, ProductDto vẫn là kiểu tĩnh; mapping hoặc validation runtime cần thêm khi API không đáng tin cậy.

Giới hạn của resourceCopy Anchor Link

Không dùng resource cho mọi bất đồng bộ chỉ để tránh subscribe():

• Search-as-you-type cần debounceTime, switchMap và có thể nhiều event; pipeline RxJS diễn tả trực tiếp hơn.
• WebSocket, SSE và message stream cần xử lý mọi event theo thứ tự. Resource ưu tiên giá trị hiện tại.
• Lệnh ghi như tạo đơn hàng là từng attempt độc lập, có optimistic update, retry và phản hồi riêng. Một resource theo key thường không biểu diễn đủ ngữ nghĩa command.
• Upload cần progress event. Resource có loading/value/error nhưng không phải UI cho một chuỗi HttpEvent nhiều mốc.

Nói ngắn gọn: chọn resource cho “đọc giá trị hiện tại theo params”; chọn Observable/RxJS khi dòng thời gian và từng event là trọng tâm.

Lỗi thường gặp và trade-offCopy Anchor Link

Lỗi HTTP từ HttpClient được phát qua error channel của Observable, thường là HttpErrorResponse. Đừng hiển thị thẳng error.error cho người dùng: payload này do server hoặc proxy trả về và có thể không có hình dạng bạn mong đợi. Phân loại status, lỗi mạng và lỗi validation trước khi quyết định thông báo hay retry. Xem Xử lý lỗi API để xây chính sách đó.

Checklist và tóm tắtCopy Anchor Link

Trước khi hoàn thành một integration HTTP, kiểm tra các câu hỏi sau:

• provideHttpClient() đã có ở application config và interceptor chung được cấu hình một chỗ.
• Component không tự biết URL, DTO thô hoặc header xác thực; data-access service sở hữu các chi tiết này.
• Generic phản ánh body mong đợi, còn dữ liệu quan trọng có validation runtime khi cần.
• Params/headers được gán lại vì chúng immutable; quy ước mảng khớp với backend.
• Request thay thế được hủy bằng switchMap; subscription dài hoặc imperative có lifecycle rõ ràng.
• UI progress xử lý trường hợp không có total và không dùng Fetch backend khi cần upload progress.
• Resource chỉ được dùng cho state đọc theo params; mutation, realtime và pipeline thời gian phức tạp giữ contract phù hợp.

Tóm lại, HttpClient là biên giao tiếp HTTP chứ không chỉ là một hàm get(). Cấu hình provider một lần, giữ HTTP ở data-access layer, mô tả rõ contract response và chọn lifecycle phù hợp cho từng request. Làm đúng các ranh giới này giúp phần UI đơn giản hơn, đồng thời mở đường cho interceptor, xử lý lỗi, xác thực và cache nhất quán.