⚡ Bộ Lọc Điều Kiện Trong Angular 20: Tối Ưu HTTP

Giới thiệu

Khi bạn làm việc với Angular đủ lâu, bạn sẽ quen thuộc với các bộ lọc HTTP (HTTP Interceptors). Chúng giống như những người bảo vệ đứng ở cửa mỗi yêu cầu HTTP. Chúng có thể:

• Gắn token xác thực nếu cần.
• Ghi lại mọi thứ vào console.
• Thực hiện retry và caching.

Tuy nhiên, không phải tất cả yêu cầu đều cần retry hoặc caching. Ví dụ:

• 🔑 Một yêu cầu đăng nhập không nên tự động retry (trừ khi bạn muốn bị khóa tài khoản sau 3 lần thử).
• 📊 Một API phân tích có thể không cần caching (ai quan tâm đến số lần nhấp chuột ngày hôm qua?).
• 🛒 Một API danh mục sản phẩm? Chắc chắn là một ứng viên hoàn hảo cho retry và caching — vì người dùng mong đợi kết quả nhanh khi duyệt sản phẩm.

Nơi đây, bộ lọc điều kiện phát huy tác dụng. Thay vì áp dụng logic một cách mù quáng, chúng ta sẽ nói với Angular:
👉 “Chỉ làm điều này cho những API cụ thể. Đừng lãng phí thời gian ở những nơi khác.”

🎯 Mục Tiêu

Mục tiêu của chúng ta là:

• ✅ Áp dụng logic retry chỉ cho những API cụ thể.
• ✅ Caching kết quả từ các API cần thiết.
• ✅ Giữ cho pipeline sạch sẽ bằng cách bỏ qua logic không cần thiết.

Nghe có vẻ hay không? Hãy cùng lập trình nào.

💡 Bộ Lọc Retry (Điều Kiện)

Retry rất tốt cho các mạng không ổn định — nhưng lại nguy hiểm cho các endpoint nhạy cảm như đăng nhập. Hãy áp dụng retry chỉ cho API danh mục của chúng ta.

import { HttpInterceptorFn } from '@angular/common/http';
import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  const shouldRetry = req.url.includes('/api/catalog');

  if (shouldRetry) {
    return next(req).pipe(
      retry(3) // 🔄 retry yêu cầu thất bại tối đa 3 lần
    );
  }

  return next(req); // 🚫 không retry cho các endpoint khác
};

👉 Ở đây, chúng ta chỉ thực hiện retry cho các yêu cầu /api/catalog. Các API như đăng nhập, xác thực và các API khác sẽ không bị ảnh hưởng (tài khoản của bạn vẫn an toàn 🎉).

💡 Bộ Lọc Caching Đơn Giản (Điều Kiện)

Không ai thích chờ đợi dữ liệu giống nhau hai lần. Hãy thêm một bộ nhớ cache đơn giản, một lần nữa chỉ cho /api/catalog.

import { HttpInterceptorFn } from '@angular/common/http';
import { of, tap } from 'rxjs';

const cache = new Map<string, any>();

export const cachingInterceptor: HttpInterceptorFn = (req, next) => {
  const isCacheable = req.method === 'GET' && req.url.includes('/api/catalog');

  if (isCacheable) {
    const cachedResponse = cache.get(req.url);

    if (cachedResponse) {
      console.log('📦 Trả về phản hồi đã lưu cho', req.url);
      return of(cachedResponse); // ✅ phục vụ từ cache
    }

    return next(req).pipe(
      tap((event) => {
        cache.set(req.url, event); // 💾 lưu vào cache
      })
    );
  }

  return next(req); // 🚫 không caching cho các yêu cầu khác
};

👉 Theo cách này, các yêu cầu GET lặp lại cho /api/catalog/... sẽ rất nhanh. Các endpoint khác? Vẫn hoạt động bình thường.

⚙️ Kết Hợp Điều Kiện

Bây giờ hãy kết hợp caching + retry thành một bộ lọc điều kiện duy nhất.

import { HttpInterceptorFn } from '@angular/common/http';
import { cachingInterceptor } from './caching.interceptor';
import { retryInterceptor } from './retry.interceptor';

export const conditionalApiInterceptor: HttpInterceptorFn = (req, next) => {
  const isCatalogApi = req.url.includes('/api/catalog');

  if (isCatalogApi) {
    // 🌀 Kết hợp caching + retry
    return cachingInterceptor(req, (cachedReq) =>
      retryInterceptor(cachedReq, next)
    );
  }

  // 🚫 Fallback: không có logic đặc biệt
  return next(req);
};

👉 Thật kỳ diệu!

Các yêu cầu danh mục nhận cả caching và retry.

Các yêu cầu khác đi qua mà không bị ảnh hưởng.

🔌 Đăng Ký Các Bộ Lọc

Cuối cùng, hãy kết nối mọi thứ trong Angular 20.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { conditionalApiInterceptor } from './app/interceptors/conditional-api.interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([conditionalApiInterceptor])
    ),
  ],
});

Đó là tất cả. Ứng dụng của bạn giờ đã có tính năng retry và caching thông minh 🎉.

🚀 Lợi Ích

• Kiểm soát chi tiết – chỉ retry/caching nơi nào an toàn.
• Tăng hiệu suất – không còn các cuộc gọi mạng lãng phí.
• Mã nguồn sạch hơn – không còn những câu lệnh if phức tạp khắp nơi.

🔮 Trường Hợp Sử Dụng Thực Tế

• ✅ Retry cho API danh mục/sản phẩm nhưng không bao giờ cho yêu cầu đăng nhập.
• ✅ Cache dữ liệu hồ sơ người dùng để điều hướng mượt mà hơn.
• ✅ Áp dụng logic đặc biệt chỉ trong môi trường sản xuất (giữ cho nhật ký phát triển không bị ồn).

📝 Kết Luận

Bộ lọc điều kiện trong Angular 20 giúp cho pipeline HTTP của bạn thông minh, nhanh chóng và không gặp rắc rối. Thay vì làm phiền tất cả các yêu cầu với retry hoặc caching, bạn chỉ nâng cao những yêu cầu thực sự quan trọng.

Mô hình này giữ cho mã của bạn sạch sẽ, đáng tin cậy và sẵn sàng mở rộng.

⚡ Bonus: Bạn thậm chí có thể kết hợp điều này với các cờ tính năng để chuyển đổi retry/caching tại thời gian chạy — không cần phải triển khai lại.