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†來源】【14†來源】。

以上是Angular 中的攔截器的詳細內容。更多資訊請關注PHP中文網其他相關文章！