在本文中，我們將探索如何在 Angular 17 中使用功能性 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));
Angular 17 中的函數攔截器提供了一種靈活且強大的方法來處理 HTTP 請求和回應。它們對於跨職能任務特別有用，例如身份驗證、日誌記錄和錯誤處理。
更多詳情請參閱 Angular 攔截器官方文件【13†來源】【14†來源】。
以上是Angular 中的攔截器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
