Angular 中的请求拦截：一劳永逸解决接口处理痛点

2024-02-20 07:18:58

在上一篇文章中，我们单独处理了接口。但在实际的开发项目中，我们通常会遇到大量的接口，其中有些需要登录凭证，而有些则不需要。逐个处理每个接口显然不合适。那么，我们是否可以考虑对请求进行拦截封装呢？如果是，我们应该如何做呢？

本文将带领大家深入探索 Angular 中的请求拦截，帮助您一劳永逸地解决接口处理痛点。

什么是请求拦截器？

请求拦截器本质上是一个 HTTP 请求生命周期中的一个钩子，它允许我们在请求发出之前或收到响应之后对请求进行修改。通过请求拦截器，我们可以对请求头、请求体、响应头和响应体进行修改，从而实现各种各样的功能。

如何在 Angular 中使用请求拦截器？

在 Angular 中，使用请求拦截器非常简单。首先，我们需要创建一个新的 Angular 服务来实现拦截器。例如，我们可以创建一个名为 MyHttpInterceptor 的服务：

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

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 在这里对请求进行修改
    return next.handle(request);
  }
}

然后，我们需要在 Angular 模块的 providers 数组中注册这个服务：

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { MyHttpInterceptor } from './my-http-interceptor.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [MyHttpInterceptor],
})
export class AppModule {}

现在，我们的请求拦截器已经准备好了。接下来，我们需要在我们的组件或服务中使用它。我们可以通过在 HTTP 请求中注入 HttpClient 服务并使用 useInterceptor() 方法来实现：

import { HttpClient } from '@angular/common/http';

export class MyComponent {
  constructor(private http: HttpClient) {}

  makeRequest() {
    this.http.get('/api/data', {
      useInterceptor: MyHttpInterceptor,
    }).subscribe((data) => {
      console.log(data);
    });
  }
}