Angular 4.3 拦截器 - 如何使用

typescript

Angular 4.3 拦截器 - 如何使用？

在Angular开发中，拦截器是一个非常有用的工具，它可以帮助我们在发送HTTP请求或接收响应之前进行一些处理。拦截器提供了一种简洁、灵活的方式来修改请求或响应，以满足我们的特定需求。在Angular 4.3及以后的版本中，拦截器功能得到了进一步的改进和增强。本文将介绍如何在Angular中使用拦截器，并提供一个案例代码来说明其用法。

## 什么是拦截器？

拦截器是Angular中的一个特性，它允许我们在HTTP请求或响应被发送或接收之前，对其进行一些预处理或后处理操作。拦截器位于请求链和响应链之间，可以在请求被发送之前对其进行修改，也可以在接收到响应后对其进行处理。这使得我们能够在发送请求或接收响应之前，添加、删除或修改请求头、请求参数等信息，或者对响应进行处理，例如添加错误处理逻辑、转换响应数据等。

## 如何使用拦截器？

要在Angular中使用拦截器，我们需要遵循以下几个步骤：

1. 创建一个拦截器类

首先，我们需要创建一个拦截器类，该类必须实现HttpInterceptor接口，并重写intercept方法。intercept方法接受两个参数，一个是HttpRequest对象，另一个是HttpHandler对象。在intercept方法中，我们可以对请求进行修改，并使用next.handle方法将请求传递给下一个拦截器或最终的目标处理程序。

下面是一个简单的拦截器类的示例：

typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxJS';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 在发送请求之前进行一些处理
    // 修改请求头、请求参数等
    const modifiedRequest = request.clone({
      headers: request.headers.set('Authorization', 'Bearer my-token')
    });
    // 将修改后的请求传递给下一个拦截器或目标处理程序
    return next.handle(modifiedRequest);
  }
}

2. 注册拦截器

接下来，我们需要将拦截器注册到Angular的依赖注入系统中。在Angular中，我们可以使用HTTP_INTERCEPTORS常量和provide函数来实现这一点。

typescript
import { HTTP_INTERCEPTORS } from '@angular/common/http';
// 导入之前创建的拦截器类
import { MyInterceptor } from './my-interceptor';
@NgModule({
  providers: [
    // 注册拦截器
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ]
})
export class AppModule { }

在上面的例子中，我们使用provide函数将拦截器类MyInterceptor注册到HTTP_INTERCEPTORS这个令牌上，并将multi属性设置为true，表示拦截器是一个多重提供者。

3. 使用拦截器

一旦拦截器被注册到Angular的依赖注入系统中，它将自动应用于所有HTTP请求。我们无需在每个请求中显式地调用拦截器。当我们发送HTTP请求时，拦截器将按照注册的顺序依次对请求进行处理。

下面是一个使用拦截器的简单示例：

typescript
import { HttpClient } from '@angular/common/http';
export class MyService {
  constructor(private http: HttpClient) { }
  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

在上面的例子中，我们使用HttpClient发送HTTP请求，但在请求被发送之前，拦截器将自动对其进行处理。

## 案例代码

以下是一个更具体的案例代码，展示了如何使用拦截器在请求中添加身份验证令牌：

typescript
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxJS';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 获取身份验证令牌
    const token = localStorage.getItem('token');
    // 如果存在令牌，则将其添加到请求头中
    if (token) {
      const modifiedRequest = request.clone({
        headers: request.headers.set('Authorization', <code>Bearer ${token}</code>)
      });
      return next.handle(modifiedRequest);
    }
    // 否则，直接传递请求给下一个拦截器或目标处理程序
    return next.handle(request);
  }
}

typescript
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
// 导入之前创建的拦截器类
import { AuthInterceptor } from './auth-interceptor';
@NgModule({
  providers: [
    // 注册拦截器
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  template: <code>
    <button (click)="getData()">获取数据</button>
  </code>
})
export class AppComponent {
  constructor(private http: HttpClient) { }
  getData() {
    this.http.get('https://api.example.com/data').subscribe(
      response => console.log(response),
      error => console.error(error)
    );
  }
}

在上面的例子中，我们创建了一个名为AuthInterceptor的拦截器类，用于在请求头中添加身份验证令牌。然后，我们将拦截器注册到Angular的依赖注入系统中，并使用HttpClient发送HTTP请求。当我们点击"获取数据"按钮时，拦截器将自动在请求中添加身份验证令牌。

拦截器是Angular中一个非常强大的功能，它可以帮助我们轻松地对HTTP请求或响应进行处理。通过使用拦截器，我们可以在发送请求之前或接收响应之后，对其进行修改或处理，以满足我们的具体需求。在本文中，我们介绍了如何在Angular中使用拦截器，并通过一个案例代码演示了其用法。希望这篇文章能够帮助你更好地理解和使用Angular的拦截器功能。