引言
在使用Angular进行项目开发时，我们经常需要在每个HTTP请求的请求头中添加一些自定义参数。传统的做法是在每个请求方法中手动添加这些参数，但这种方式非常繁琐且容易出错。而使用拦截器功能可以轻松实现请求头参数的添加，提高代码的可复用性和可维护性。
创建拦截器
首先，我们需要创建一个拦截器类，该类实现Angular的HttpInterceptor接口。在这个类中，我们可以自定义一些逻辑来处理HTTP请求和响应。
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// 在请求头中添加自定义参数
const modifiedRequest = request.clone({
setHeaders: {
'Custom-Header': 'Custom-Value'
}
});
// 继续处理请求
return next.handle(modifiedRequest);
}
}
在上面的代码中，我们首先通过@Injectable()装饰器将这个类标记为可注入的服务。然后，我们实现了HttpInterceptor接口中的intercept方法，该方法接收一个原始请求对象和HttpHandler对象作为参数。在intercept方法中，我们可以修改请求对象，并通过HttpHandler对象继续处理修改后的请求。
在上述代码中，我们通过调用请求对象的clone方法来创建一个新的请求对象，并通过setHeaders方法设置请求头中的自定义参数。然后，我们将修改后的请求对象传递给HttpHandler对象的handle方法继续处理请求。
注册拦截器
接下来，我们需要在应用模块中注册这个拦截器。打开app.module.ts文件，并在providers数组中添加拦截器类。
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 { HeaderInterceptor } from './header-interceptor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: HeaderInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述代码中，我们使用provide配置项将HTTP_INTERCEPTORS标记为注入令牌，并将HeaderInterceptor类指定为拦截器类。通过将multi设置为true，我们可以将多个拦截器添加到应用中。
使用拦截器
在注册了拦截器之后，我们可以开始使用它来发送HTTP请求。在组件或服务中，只需要正常使用HttpClient对象发送请求，拦截器会自动添加请求头中的自定义参数。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<button (click)="sendRequest()">发送请求</button>
`
})
export class AppComponent {
constructor(private http: HttpClient) {}
sendRequest() {
this.http.get('api/data').subscribe((response) => {
console.log(response);
});
}
}
在上面的代码中，我们通过注入HttpClient对象来发送GET请求。当我们调用http.get方法发送请求时，拦截器会自动将自定义参数添加到请求头中。
结语
如此简单，我们就实现了使用拦截器在Angular10中轻松实现请求头传参数的功能。通过拦截器，我们可以避免在每个请求方法中重复地添加自定义参数，提高了代码的可复用性和可维护性。同时，使用拦截器还可以方便地进行鉴权、请求缓存等其他功能的处理。
希望本文对你有所帮助，也欢迎大家留言讨论！
参考链接：
评论 (0)