ตัวสกัดกั้นแบบฟังก์ชัน

อินเตอร์เซปเตอร์คืออะไร

HttpInterceptorFn

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

การลงทะเบียนด้วย withInterceptors

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

ตัวจัดการ next

คำขอไม่สามารถเปลี่ยนแปลงได้

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

การเชื่อมอินเตอร์เซปเตอร์หลายตัว

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

การใช้ inject() ภายในอินเตอร์เซปเตอร์

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

การตรวจสอบการตอบกลับ

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

การดักจับแบบมีเงื่อนไข

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

อินเตอร์เซปเตอร์แบบฟังก์ชันเทียบกับแบบคลาส

การทำงานร่วมกับอินเตอร์เซปเตอร์แบบ DI

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุป: อินเตอร์เซปเตอร์แบบฟังก์ชัน