在Angular 8中,HTTP拦截器可能会破坏HTTP请求的订阅。这是因为拦截器可能会修改HTTP响应,从而导致订阅的回调函数不会被触发。
以下是一个解决方法,使用rxjs中的tap
操作符来修复这个问题:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
return next.handle(request).pipe(
tap(event => {
// 在这里可以对响应进行操作
if (event.type === 4) {
// 响应已完成
// 执行你的订阅回调函数
}
})
);
}
}
在上面的代码中,我们使用了tap
操作符来监听HTTP响应,并在响应完成时执行订阅的回调函数。请注意,event.type
值为4表示HTTP响应已完成。
要使用该拦截器,需要在app.module.ts
中提供它:
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ResponseInterceptor } from './response.interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }
]
})
export class AppModule { }
这样,当你发送HTTP请求时,拦截器将会在订阅回调函数被触发之前对响应进行操作,并确保订阅回调函数可以正常执行。