Angular의 인터셉터

소개

이 기사에서는 Angular 17에서 기능적 HTTP 인터셉터를 사용하는 방법을 살펴보겠습니다. 인터셉터를 사용하면 HTTP 요청 및 응답을 조작하여 헤더 추가, 로깅, 인증 등과 같은 기능을 촉진할 수 있습니다.

기능적 HTTP 인터셉터란 무엇입니까?

Angular에서 작동하는 HTTP 인터셉터는 나가는 요청과 들어오는 응답을 가로채 잠재적으로 변환하는 데 사용되는 미들웨어 기능입니다. Angular 17에서는 HttpInterceptorFn을 사용하여 작동하는 인터셉터를 생성할 수 있습니다.

코드 예

다음은 작동하는 HTTP 인터셉터를 생성하는 방법을 보여주는 간단한 예입니다.

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

export const loggingInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
  console.log(`Outgoing request to URL: ${req.url}`);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log(`Response received from URL: ${req.url} with status: ${event.status}`);
      }
    })
  );
};

이 예에서 인터셉터는 나가는 각 요청의 URL과 해당 응답을 기록합니다.

인터셉터 사용

이 인터셉터를 사용하려면 ProvideHttpClient 및 withInterceptors를 사용하여 애플리케이션 초기화 중에 구성해야 합니다.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
}).catch(err => console.error(err));

코드 설명

• HttpInterceptorFn: 인터셉터 함수를 나타내는 유형입니다.
• HttpRequest: HTTP 요청을 나타냅니다.
• HttpHandlerFn: 인터셉터 체인의 다음 요청 핸들러 함수를 나타냅니다.
• next(req): 체인의 다음 인터셉터를 호출하거나 마지막 인터셉터인 경우 요청을 보냅니다.

결론

Angular 17의 기능적 인터셉터는 HTTP 요청 및 응답을 처리하는 유연하고 강력한 방법을 제공합니다. 특히 인증, 로깅, 오류 처리 등 다기능 작업에 유용합니다.

자세한 내용은 인터셉터에 대한 공식 Angular 문서를 참조하세요.【13†source】【14†source】.

위 내용은 Angular의 인터셉터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!