14 HttpClientModule

14.6 Interceptors

拦截器是 Angular 应用中全局捕获和修改 HTTP 请求和响应的方式。（Token、Error）拦截器将只拦截使用 HttpClientModule 模块发出的请求。

ng g interceptor <name>

14.6.1 Request Interceptor

@Injectable ()
export class AuthInterceptor implements HttpInterceptor {
     constructor(){}
     // 拦截方法
     intercept (
        // unknown 指定请求体（body）的类型
        request: HttpRequest<unknown>, 
    next: HttpHandler
        // unknown 指定响应内容（body）的类型
    ): Observable<HttpEvent<unknown>>{
        // 克隆并修改请求头
        const req = request.clone({
            setHeaders: {
                Authorization: "Bearer xxxxxxx"
            }
    })
        // 通过回调函数将修改店的请求头回传给应用
        return next.handle(req)
    }
}

14.6.2 Response Interceptor

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor() {}
    // 拦截方法
    intercept (
        request: HttpRequest<unknown>,
        next: HttpHandler
    ): Observable<any> {
        return next.handle(request).pipe(
            retry(2), // 重试2次
            catchError((error: HttpErrorResponse) => throwError(error))
        )
    }
}

14.6.3 Interceptor inject

import { AuthInterceptor } from "./auth.interceptor" 
import { HTTP_INTERCEPTORS } from "@angular/common/http"
@NgModule({
    providers: [
    {
            provide: HTTP_ INTERCEPTORS, 
      useClass: AuthInterceptor,
            multi: true
        }
    ]
})