Angular 8+ HTTP拦截器中废弃tap操作符的替换方法

tap操作符本身并未废弃，被标记为废弃的是RxJS旧版支持的「直接向tap传入多个独立回调函数」的调用签名。Angular 8配套的RxJS 6+版本开始，官方要求tap接收标准观察者对象作为参数，原有业务逻辑可以完全平移，不需要更换其他操作符。

修改后可正常运行的拦截器代码如下：

handler(next, request) {
    return next.handler(request)
        .pipe(
            tap({
                next: (event) => {
                    if (event instanceof HttpResponse) {
                        this.spinnerService.requestEnded();
                    }
                },
                error: (error: HttpErrorResponse) => {
                    this.spinnerService.resetSpinner();
                    throw error;
                }
            }),
        );
}

核心改动说明 #

• 仅需把原来传入tap的两个独立回调，包裹在一个普通对象中，分别对应对象的next、error属性即可，不需要修改任何业务逻辑
• 原有执行逻辑完全保留：请求正常返回HttpResponse时触发加载圈结束逻辑，请求报错时重置加载圈状态，同时将错误继续向下抛出供后续拦截器/业务代码处理
• 这种观察者对象的传参格式是RxJS 6+所有操作符的标准写法，后续大版本不会被标记为废弃

内容的提问来源于stack exchange，提问作者Mych