web-dev-qa-db-ja.com

Angular 4 Http Interceptor：next.handle（...）。doは関数ではありません

HTTPエラーをより適切に処理できるようにこのHTTPInterceptorを作成しました。gitpullを実行して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の関数ではありません。 HttpInterceptorHandler.webpackJsonp .../../../common/@angular/common/http.es5.js.HttpInterceptorHandler.handleでインターセプト（gobae.interceptor.ts：12）

コードに影響を与える可能性のあるものは最近変更されましたか？インターセプターでhttp応答を「キャッチ」するために今何ができますか？

angularangular-http-interceptors
28
Multitut

do演算子がないため、このエラーがスローされます。以下は、do演算子を使用してオブザーバブルオブジェクトにパッチを適用してインポートします。

import 'rxjs/add/operator/do';

RxJには、ライブラリサイズを削減するためにデフォルトですべての演算子関数がバンドルされているわけではありません。個別に使用する演算子をインポートする必要があります。

51
user8510992

rxjs 6/angular 6はパイプを必要とします

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

インポートを使用する必要があります。

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

私はこれから演算子を変更することになりました：

next.handle(req).do

これに：

next.handle(req).subscribe

のようだ：

  1. Rxjsの演算子は、デフォルトではもうロードされていません

  2. AngularはHTTP呼び出しでオブザーバブルを実装しているため、購読するのが正しい方法です

0
Multitut