Angular HttpClient 拦截器使用详解-JavaScript中文网-JavaScript教程资源分享门户

Angular 的 HttpClient 是一个非常强大的 HTTP 客户端，能够提供丰富的 HTTP 请求和响应的处理能力。在实际应用中，我们通常需要对 HTTP 请求进行一些共同的处理，比如添加请求头、进行错误处理、缓存等操作，这时候就需要用到拦截器来实现。本文将介绍 Angular HttpClient 拦截器的使用和实现，为前端开发者提供一些学习和指导意义。

什么是拦截器？

拦截器指的是在 HTTP 请求或响应被处理前或处理后会被执行的函数。在 Angular 中，我们可以通过实现 HttpInterceptor 接口来创建自定义的拦截器。拦截器可以用于在 HTTP 请求和响应的生命周期中添加一些共同的处理逻辑，比如添加请求头、进行错误处理、缓存等操作，从而减少代码量和提高代码复用性。

拦截器的使用

在 Angular 中使用拦截器很简单，只需要实现 HttpInterceptor 接口中的 intercept 方法并注册即可。intercept 方法接收两个参数：HttpRequest 对象和 HttpHandler 对象。HttpRequest 对象用来表示 HTTP 请求，HttpHandler 对象用来表示下一个拦截器或处理最终的请求的对象。

我们来看一个简单的拦截器示例：

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const authToken = 'my-auth-token';
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });
    return next.handle(authReq);
  }
}

在上面的示例中，我们实现了一个名为 AuthInterceptor 的拦截器，它的作用是给 HTTP 请求添加一个 Authorization 头部。我们首先在拦截器中定义了一个名为 authToken 的常量，然后对传入的 HttpRequest 对象进行一些修改，并用 HttpHandler 对象调用 handle 方法，继续处理后续的拦截器或最终的请求。

接下来我们需要在 Angular 应用中注册这个拦截器，可以通过在 app.module.ts 中的 providers 中添加以下代码来实现：

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

其中，provide 值为常量 HTTP_INTERCEPTORS，表示要添加一个 HTTP 拦截器。useClass 值为我们实现的拦截器类 AuthInterceptor 的名称。最后一个参数 multi 表示是否可以添加多个拦截器，默认值为 false，需要改为 true 才能正常添加拦截器。

当你发送一个 HTTP 请求时，会依次经过注册的拦截器，并按顺序进行处理。在上面的示例中，首先会经过 AuthInterceptor 拦截器，然后再进行后续的处理。

拦截器的实战

在实际应用中，我们可以通过拦截器实现一些常用的功能，下面是一些拦截器的使用场景：

添加请求头

在开发中，我们通常需要为 HTTP 请求添加一些公共的请求头，比如 Authorization、User-Agent 等，可以通过拦截器来实现：

export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const authToken = 'my-auth-token';
    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });
    return next.handle(authReq);
  }
}

export class UserAgentInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const userAgent = 'my-user-agent';
    const authReq = req.clone({
      headers: req.headers.set('User-Agent', userAgent)
    });
    return next.handle(authReq);
  }
}

错误处理

在应用中，我们通常需要对 HTTP 请求的错误进行处理，比如重试和错误提示。可以通过拦截器来实现：

export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 处理 401 错误
        } else {
          // 处理其他错误
        }

        return throwError(error);
      })
    );
  }
}

缓存处理

在应用中，我们通常需要对 HTTP 请求的响应进行缓存，以提高性能和减少网络请求。可以通过拦截器来实现：

export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map<string, any>();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const cacheKey = req.url + req.params.toString();
    const cachedValue = this.cache.get(cacheKey);

    if (cachedValue) {
      return of(cachedValue);
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(cacheKey, event);
        }
      })
    );
  }
}

在上面的示例中，我们定义了一个名为 CacheInterceptor 的拦截器，它用于对 HTTP 请求进行缓存处理。我们在拦截器中实现了一个简单的缓存逻辑，定义了一个 Map 对象来保存缓存的值，当拦截到 HTTP 请求时，首先从缓存中取出已经保存好的响应对象，并直接返回。如果没有缓存，则继续发送 HTTP 请求，并在返回的响应对象中保存到缓存中。

总结

在本文中，我们介绍了 Angular HttpClient 拦截器的使用和实现，以及一些常见的拦截器使用场景。拦截器是 Angular HTTP 客户端中强大的功能，可以通过它实现对 HTTP 请求和响应的统一处理，并提高代码的复用性和可读性，帮助开发者更加高效地开发应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6596bdbfeb4cecbf2da7fa55

Angular HttpClient 拦截器使用详解