角4 Http拦截器:next.handle(.).do不是函数

Question

我创建这个HTTPInterceptor是为了能够更好地处理http错误，在我执行git拉出并运行npm安装之前，它运行得很好。

这是我的密码：

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http';
import {Observable} from "rxjs";
import {ToasterService} from "angular2-toaster";

@Injectable()
export class GobaeInterceptor implements HttpInterceptor {
    constructor(private toasterService: ToasterService){
    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
            .do(event => {
                if (event instanceof HttpResponse) {
                    let response = event.body;
                    if(response.Error){
                        this.toasterService.pop('error', 'Error '+response.Code, response.Message);
                    }
                }
            });
    }
}

这就是我遇到的错误：

GobaeInterceptor.webpackJsonp.../../../../../src/app/services/gobae.interceptor.ts.GobaeInterceptor.intercept (.).do不是HttpInterceptorHandler.webpackJsonp.../../../common/@angular/common/http.es5.js.HttpInterceptorHandler.handle的next.handle (gobae.interceptor.ts:12)中的一个函数(

最近有什么东西能影响我的代码吗？现在我能做些什么来“捕获”我的拦截器上的http响应？

Answer 1

引发此错误是因为您缺少do运算符。下面的导入使用do操作符对可观察的对象进行修补。

import 'rxjs/add/operator/do';

在默认情况下，RxJ不与所有运算符函数绑定以减少库大小。您需要导入您希望单独使用的操作符。

Answer 2

rxjs 6/角6将需要管道

return next.handle(req).pipe(
  tap(event => {
    if (event instanceof HttpResponse) {
      ...
    }
  })
);

Answer 3

你必须使用进口。

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/Observable';
import 'rxjs/add/observable/throw';