web-dev-qa-db-de.com

RXJS 6: neue Version von HttpInterceptor

Ich bin gerade dabei, rxjs_compat zu meinem Projekt hinzuzufügen, um zu v6 von Bibliotheken zu wechseln.

Die vorhandene HttpInterceptor für die globale Fehlerbehandlung wird jedoch nicht mehr kompiliert. Nicht sicher, wohin es gehen soll. Versuchten alle möglichen Typkonflikte mit allem, was ausprobiert wurde.

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): Fehler TS2339: Die Eigenschaft 'empty' ist beim Typ 'typeof Observable' nicht vorhanden.

empty ist jetzt eine Konstante, akzeptiert jedoch keinen Typ, sodass dies auch nicht funktioniert. Auch konnte nicht viel in die Upgrade-Hinweise finden

EDIT

obwohl interessanterweise dies kompiliert:

return Observable.of<HttpEvent<any>>();
7
  1. import {EMPTY} from 'rxjs';

  2. Return Observable.empty() durch ersetzen 

    return EMPTY;

15
Yakov Fain

Konnte nicht herausfinden, wie er etwas zurückgeben sollte, das der Compiler akzeptiert, aber zumindest einen Fehler ausgeben konnte. Der Code wird kompiliert und funktioniert, aber als Anfänger in Rxjs nicht sicher, ob er richtig ist.

  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