web-dev-qa-db-ja.com

RXJS 6：HttpInterceptorの新しいバージョン

ライブラリのv6に移行するために、rxjs_compatをプロジェクトに追加するプロセスを進めています。

ただし、グローバルエラー処理用の既存のHttpInterceptorはコンパイルされなくなりました。どこに行くべきかわからない。すべての種類を試してみました。試行されたすべてとタイプの不一致を取得します。

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError, map } from "rxjs/operators";

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(private toastr: ToastrService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(err => of(HttpErrorResponse)),
      map(err => {
        let message: string;
         this.toastr.error(`${message}`, "Application Error");
        return Observable.empty<HttpEvent<any>>();
      })
    );
  }
}

src/app/shared/http-error-interceptor.ts（26,27）：エラーTS2339：プロパティ 'empty'はタイプ 'typeof Observable'に存在しません。

emptyは定数になりましたが、型を受け入れないため、機能しません。また、 アップグレードノート で多くを見つけることができませんでした

[〜＃〜] edit [〜＃〜]

興味深いことに、これはコンパイルします：

return Observable.of<HttpEvent<any>>();
angulartypescriptrxjsangular6rxjs6
11
jenson-button-event

  1. _import {EMPTY} from 'rxjs';_

  2. Return Observable.empty()を置き換えます

    _return EMPTY;_

24
Yakov Fain

コンパイラが受け入れるものを返す方法を理解できませんでしたが、少なくともエラーをスローすることができました。コードはコンパイルされて動作しますが、Rxjsの初心者としては正しいかどうかはわかりません。

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const xhr = req.clone({
      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')
    });
    return next.handle(xhr).pipe(
      catchError((err) => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {
            this.router.navigate(['/login']);
          } else {
            this.snack.open('Communication error: ' + err.status + ' - ' + err.statusText, null,
             {duration: 5000, panelClass: 'snack-error', verticalPosition: 'top'});
          }
          return throwError('backend comm error');
        }
      })
    );
  }
1
Arthur