关于前端:Angular-HTTPInterceptor-的使用一例

43次阅读

共计 2761 个字符，预计需要花费 7 分钟才能阅读完成。

假如你有一个 Angular 应用程序，其中有一个组件须要从服务器获取特定模型的数据。你能够应用上述办法将一个名为 queryProductModel 的查问参数增加到申请中，以便服务器可能依据该参数返回相应的模型数据。

首先，你须要创立一个实现 HttpInterceptor 接口的拦截器。以下是一个示例的拦截器代码：

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

@Injectable()
export class queryProductModelInterceptor implements HttpInterceptor {intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedRequest = request.clone({
      setParams: {queryProductModel: 'true'}
    });

    return next.handle(modifiedRequest);
  }
}

接下来，你须要将拦截器注册到你的 Angular 应用程序中。你能够在根模块的提供商（providers）数组中注册该拦截器，如下所示：

import {NgModule} from '@angular/core';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import {queryProductModelInterceptor} from './query-product-model.interceptor';

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

在上述示例中，咱们将 queryProductModelInterceptor 拦截器注册为 HTTP_INTERCEPTORS 提供商，并将 multi 属性设置为true，以确保不笼罩其余已注册的拦截器。

当初，当你的组件通过 Angular 的 HTTP 客户端发送申请时，拦截器将在申请收回之前批改申请并增加 queryProductModel=true 的查问参数。

假如你的组件中有一个应用 HttpClient 进行数据申请的办法，示例如下：

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="getData()">Get Data</button>
  `
})
export class MyComponent {constructor(private http: HttpClient) {}

  getData() {this.http.get('https://example.com/api/data').subscribe((response) => {console.log(response);
      },
      (error) => {console.error(error);
      }
    );
  }
}

当你点击 ”Get Data” 按钮时，getData()办法将发送一个 HTTP GET 申请到 https://example.com/api/data。因为咱们曾经注册了queryProductModelInterceptor 拦截器，该拦截器将批改申请并增加 queryProductModelModel=true 的查问参数。

在 Chrome 开发者工具中，你能够察看到理论发送的 HTTP 申请的 URL 是https://example.com/api/data?queryProductModel=true。这意味着拦截器胜利地将查问参数增加到了申请中，并且该参数将被发送到服务器以获取相应的模型数据。

请留神，示例中的 URL（https://example.com/api/data）只是一个占位符，你须要将其替换为理论的服务器端点 URL，以确保申请可能达到正确的服务器。

在 Angular 的 HttpInterceptor 接口中，intercept 和 handleRequest 办法各自具备不同的作用。

intercept 办法：
- intercept 办法是 HttpInterceptor 接口的外围办法之一。
- 该办法用于拦挡传出的 HTTP 申请和传入的 HTTP 响应，并对它们进行解决或批改。
- 在 intercept 办法中，你能够拜访到原始的申请对象和申请处理器对象，能够批改申请的头部、URL、参数等，并且能够增加、删除或批改申请的拦截器。
- 你能够在 intercept 办法中执行一些额定的逻辑，如增加身份验证信息、处理错误、记录日志等。
- 最初，你须要调用 next.handle(request) 将批改后的申请传递给下一个拦截器或最终的申请处理器。
handleRequest 办法：
- handleRequest 办法是申请处理器（request handler）的一部分，用于解决最终的 HTTP 申请。
- 在 intercept 办法中的最初一步，你须要调用 next.handle(request)，这将触发 handleRequest 办法的执行。
- handleRequest 办法将接管到通过拦截器链解决后的最终申请对象，并解决该申请，发送它到服务器并期待响应。
- 你能够在 handleRequest 办法中执行一些与申请和响应相干的操作，例如发送申请、解决响应、处理错误等。
- handleRequest 办法返回一个 Observable 对象，用于订阅响应并对其进行解决。

综上所述，intercept 办法用于拦挡和批改传出的 HTTP 申请，并在最初调用 next.handle(request) 将批改后的申请传递给下一个拦截器或最终的申请处理器。而 handleRequest 办法则负责理论解决最终的 HTTP 申请，并返回一个可察看对象以进行响应的解决。

通过这两个办法的组合应用，你能够在 Angular 中的 HTTP 拦截器中实现对申请和响应的拦挡、批改和解决，以及执行额定的逻辑操作。

正文完