Angular 依赖注入教程：实现拦截器 (Interceptor)-JavaScript中文网-JavaScript教程资源分享门户

在我们开发SPA（Single Page Application）的时候，我们通常会向后端发送网络请求，获得数据并将其呈现给前端用户。有时候，在发送请求之前或者接收到响应之后，我们需要对请求或者响应进行一些处理，例如添加请求头或者对错误进行处理。这种需求可以使用Angular的拦截器来实现。

在本文中，我将介绍Angular拦截器的概念和用法，并且提供一个示例代码，演示如何通过拦截器添加请求头。

什么是Angular拦截器

拦截器是Angular提供的一个用于处理HTTP请求和响应的API。它们被设计为在发送请求和接收响应之前/之后拦截请求，以便进行一些必要的操作，例如添加请求头、修改请求参数、增加错误处理等。拦截器拥有下面的这些方法：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>

intercept() 是拦截器需要实现的方法，它拦截请求并对其进行一些操作，最后使用 next.handle() 将请求传递给下一个拦截器。

constructor()

构造器是拦截器的构造函数，它可以被用来注入其他服务，并在之后的拦截中使用。

内置的Angular拦截器一般不需要直接引入（如JsonpInterceptor, HttpXsrfInterceptor等），当我们在HttpClientModule的providers列表中添加httpInterceptors时会自动引入。

如何使用Angular拦截器

现在我们知道了什么是Angular拦截器和它们的作用，下面我们来看看如何使用拦截器。

1、创建一个Interceptor

我们可以通过运行ng generate interceptor命令来创建拦截器。

ng generate interceptor HeaderInterceptor

运行这个命令会在src/app目录下生成一个名为header-interceptor.ts的文件，其中包含了一个名为HeaderInterceptor的类。

2、为拦截器添加代码

例如，我们希望给发送的请求添加一个名为Authorization的请求头。我们可以通过实现拦截器的intercept()方法来达到这个目的。

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

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = 'insert-your-token';
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    return next.handle(request);
  }
}

在这个拦截器中，我们首先通过@Injectable()注解将其标记为一个可注入的服务。然后，我们实现intercept()方法，并向request中添加Authorization头。最后，我们使用next.handle()方法将请求传递到下一个拦截器或最终到HttpClient。

3、将自定义的Interceptor加入HttpClientModule的providers列表中

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HeaderInterceptor } from './header-interceptor';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }
  ]
})
export class AppModule { }

在这个NgModule中，我们向providers列表中添加了一个名为HeaderInterceptor的拦截器服务，并将其标记为HTTP_INTERCEPTORS。这是Angular中拦截器的标准标识符，Angular会使用它来自动注入所有已注册拦截器，通过multi: true表示了要实现多拦截器。

4、测试

当我们在Angular应用中发送一个HTTP请求时，拦截器会自动拦截请求。我们可以通过浏览器的开发者工具查看请求头，确认请求头中已经成功添加了Authorization头。

总结

在本文中，我们介绍了Angular拦截器的概念，以及如何创建一个自定义拦截器并将其添加到应用中。我们还提供了添加请求头的示例代码，帮助您更好地理解拦截器的使用和应用，同时也可以根据实际情况来应用拦截器。

希望这篇文章对你的Angular学习和应用有所帮助，如果你对此有疑问或建议，请在下面留言区中给我们留言。

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

Angular 依赖注入教程：实现拦截器 (Interceptor)

什么是Angular拦截器

如何使用Angular拦截器

总结

纠错反馈