在Angular中,可以使用拦截器来拦截Http请求和响应,并对其进行处理。下面是一个使用拦截器的示例代码:
首先,创建一个名为http-interceptor.ts
的拦截器文件,并编写以下代码:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 在请求前进行处理
// 可以在请求头中添加自定义的信息
request = request.clone({
setHeaders: {
'X-CustomHeader': 'Custom Value'
}
});
return next.handle(request).pipe(
// 在响应后进行处理
// 可以对响应进行转换或其他操作
tap(event => {
if (event instanceof HttpResponse) {
// 做一些处理
}
})
);
}
}
接下来,在app.module.ts
文件中,将拦截器添加到HTTP_INTERCEPTORS
提供者中:
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomHttpInterceptor } from './http-interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: CustomHttpInterceptor,
multi: true
}
]
})
export class AppModule { }
现在,每次发送HTTP请求时,都会先经过拦截器进行处理。你可以在intercept
方法中根据需求进行自定义处理。