Question

我创建了这个HTTPInterceptor以便能够更好地处理http错误，它在我执行git pull并运行npm install之前运行良好。

这是我的代码：

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);
                    }
                }
            });
    }
}

这是我得到的错误：

TypeError：next.handle（...）。do不是函数在GobaeInterceptor.webpackJsonp ... / .. / .. / .. / .. / src / app / services / gobae.interceptor.ts.GobaeInterceptor.intercept （gobae.interceptor.ts：12）在HttpInterceptorHandler.webpackJsonp ... / .. / .. / common/@angular/common/http.es5.js.HttpInterceptorHandler.handle （

最近有什么影响我代码的内容发生了变化吗？我现在可以做什么来“捕捉”拦截器上的http响应？

Answer 1

因为您缺少do运算符而抛出此错误。下面的导入使用do运算符修补可观察对象。

import 'rxjs/add/operator/do';

默认情况下，RxJs并未与所有运算符函数捆绑在一起以减小库大小。您需要导入要单独使用的运算符。

Answer 2

rxjs 6 / angular 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';

Answer 4

我最终改变了这个操作符：

next.handle(req).subscribe

对此：

{{1}}

似乎：

默认情况下不再加载rxjs中的运算符
由于Angular已在HTTP调用上实现了observable，因此订阅是正确的

Angular 4 Http Interceptor：next.handle（...）。do不是一个函数

4 个答案: