Angular 6：为“root”提供 HTTP_INTERCEPTORS

typescript

Angular 6：为“root”提供 HTTP_INTERCEPTORS

在Angular 6中，我们可以使用HTTP_INTERCEPTORS为根模块提供拦截器。拦截器是一个强大的功能，它允许我们在发出HTTP请求和接收HTTP响应之前和之后执行一些操作。通过使用拦截器，我们可以在应用程序的各个部分中添加一些通用的行为，如授权、错误处理和日志记录等。

添加拦截器

首先，我们需要创建一个拦截器类。拦截器类必须实现HttpInterceptor接口，并实现其intercept方法。intercept方法接收两个参数，一个是HttpRequest对象，另一个是HttpHandler对象。我们可以在intercept方法中修改请求对象或者处理响应对象。

下面是一个示例的拦截器类，它将在请求头中添加一个自定义的授权头信息：

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 authRequest = request.clone({
      headers: request.headers.set('Authorization', 'Bearer my-token')
    });
    return next.handle(authRequest);
  }
}

在上面的代码中，我们首先导入了所需的依赖，然后创建了一个@Injectable装饰器，表示这是一个可注入的服务。接下来，我们实现了HttpInterceptor接口，并在intercept方法中对请求对象进行了修改。我们首先使用clone方法创建了一个请求对象的副本，然后使用set方法在请求头中添加了一个授权头信息。

将拦截器提供给根模块

要将拦截器提供给根模块，我们需要在根模块的providers数组中注册拦截器类。我们可以使用HTTP_INTERCEPTORS常量来指定要注册的拦截器。

下面是一个示例的根模块，它将AuthInterceptor拦截器提供给了应用程序的根模块：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的代码中，我们首先导入了所需的依赖，然后在providers数组中注册了AuthInterceptor拦截器类。我们使用provide属性指定了要注册的拦截器类型，useClass属性指定了要使用的拦截器类，multi属性设置为true表示允许多个拦截器同时工作。

使用拦截器

现在我们已经成功将拦截器提供给了根模块，接下来我们可以在应用程序中使用它。当我们发出HTTP请求时，拦截器将会拦截请求并进行相应的处理。

下面是一个示例的组件，它使用了HttpClient服务来发出HTTP请求：

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

在上面的代码中，我们首先导入了所需的依赖，然后在构造函数中注入了HttpClient服务。在getData方法中，我们使用HttpClient的get方法发出了一个HTTP GET请求，并订阅了响应。当请求被发送时，拦截器将拦截请求并添加授权头信息，然后传递给后续的处理器。

通过使用HTTP_INTERCEPTORS常量，我们可以很容易地为根模块提供HTTP拦截器。拦截器是一个强大的功能，它允许我们在发出HTTP请求和接收HTTP响应之前和之后执行一些操作。通过添加拦截器，我们可以在应用程序的各个部分中添加一些通用的行为，从而提高代码的复用性和可维护性。

以上就是关于在Angular 6中为“root”提供HTTP_INTERCEPTORS的介绍和示例代码。希望能对你理解和使用拦截器有所帮助！