Wie behandeln Fehler in einem Resolver

Ich versuche, Resolver, um eine bessere UX. Funktioniert alles Super auf den happy path. Was kann ich nicht scheinen, um herauszufinden, ist, wie die Behandlung von Ausnahmen. Mein resolver einen Dienst aufruft, und das trifft ein webapi-Projekt. Ein Beispiel:

FooResolver:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Foo> {
      return this.fooService.getById(route.params['id']).catch(err => {
    ****not sure what to do/return in the case of a server error****
    return Observable.throw(err);
  });
}

FooService:

  public getById(id: string): Observable<Foo> {
    return this.http.get(`${ this.apiUrl }/${ id }`)
        .map(this.extractData)
        .catch(this.handleError);
}

Die handleError-Funktion:

   protected handleError (error: Response | any) {
    //Todo: Log the error   
    //Errors will be handled uniquely by the component that triggered them
    return Observable.throw(error);
}

Innerhalb der FooComponent ich tun (dies ist nie der hit, die im Falle eines Fehlers zurückgegeben, die von der Dienst - /resolver):

FooComponent:

ngOnInit(): void {
    this.foo= this.route.snapshot.data['foo'];
    if (this.foo) {
       this.createForm(this.foo);
    }
}

Habe ich versucht, wirft den Fehler (wie gezeigt) - ich bekomme diese exception in der Konsole:

Nicht erfasste (bei Versprechen): Antwort mit status: 500 Internal Server Error
URL:

und die Rückkehr new Observable<Foo>(), die gibt es:

Cannot read property 'abonnieren' undefined

Habe ich ein paar Resolver, die alle erleben können Ausnahmen auf dem server, Aber ich weiß nicht, was zu tun ist im Falle dieser Ausnahmen.

InformationsquelleAutor Matt M | 2017-05-10

angular rxjs

Hier ist ein Beispiel einer meiner Resolver mit Fehlerbehandlung, mit der Technik, dass Gunter schon sagt:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Injectable()
export class ProductResolver implements Resolve<IProduct> {

    constructor(private productService: ProductService,
                private router: Router) { }

    resolve(route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable<IProduct> {
        let id = route.params['id'];
        if (isNaN(+id)) {
            console.log(`Product id was not a number: ${id}`);
            this.router.navigate(['/products']);
            return Observable.of(null);
        }
        return this.productService.getProduct(+id)
            .map(product => {
                if (product) {
                    return product;
                }
                console.log(`Product was not found: ${id}`);
                this.router.navigate(['/products']);
                return null;
            })
            .catch(error => {
                console.log(`Retrieval error: ${error}`);
                this.router.navigate(['/products']);
                return Observable.of(null);
            });
    }
}

Finden Sie das komplette Beispiel hier: https://github.com/DeborahK/Angular-Routing in der APM-final Ordner.

UPDATE Feb 2019

Hier ist eine bessere Antwort für die Fehlerbehandlung in einem resolver:

1) Wickeln Sie Ihre Schnittstelle in eine andere Schnittstelle mit einer optionalen error-Eigenschaft:

/* Defines the product entity */
export interface Product {
  id: number;
  productName: string;
  productCode: string;
  category: string;
  tags?: string[];
  releaseDate: string;
  price: number;
  description: string;
  starRating: number;
  imageUrl: string;
}

export interface ProductResolved {
  product: Product;
  error?: any;
}

2) zu beschließen, dass-Schnittstelle:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { ProductResolved } from './product';
import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root'
})
export class ProductResolver implements Resolve<ProductResolved> {

  constructor(private productService: ProductService) { }

  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<ProductResolved> {
    const id = route.paramMap.get('id');
    if (isNaN(+id)) {
      const message = `Product id was not a number: ${id}`;
      console.error(message);
      return of({ product: null, error: message });
    }

    return this.productService.getProduct(+id)
      .pipe(
        map(product => ({ product: product })),
        catchError(error => {
          const message = `Retrieval error: ${error}`;
          console.error(message);
          return of({ product: null, error: message });
        })
      );
  }

}

3) In der Komponente, ziehen Sie das Stück von der Schnittstelle, die Sie brauchen:

  ngOnInit(): void {
    const resolvedData: ProductResolved =
      this.route.snapshot.data['resolvedData'];
    this.errorMessage = resolvedData.error;
    this.product = resolvedData.product;
  }

Akzeptieren Sie dies als Antwort, denn es gibt mir ein vollständigeres Beispiel. Das ist genau das was ich gesucht habe!
Immer die Lösung zu etwas, auch wenn ein Fehler Auftritt, Art widerspricht, mit dem Zweck Sie zu lösen. Durch die Verwendung beheben, ich sage, dass die Komponente, die verantwortlich für diese route benötigt diese Informationen, und wenn aus irgendeinem Grund die Informationen nicht verfügbar sind, sollte es nicht dargestellt werden. Versprechen (Beobachtbaren) Ablehnung innerhalb beheben guard, dies zu tun und verhindert, dass die rendering-route-Komponente, aber es sollte einen einheitlichen Mechanismus zu fangen beheben Sie Fehler und gehen mit Ihnen einige Komponente für die Fehlerbehandlung.
besseres zu tun Observable.throw(theError); anstelle von null
Beobachten Sie Ihren Vortrag aus NGConf auf YouTube, googelt Fragen und die erste Antwort, die ich sehen - es geht Sie wieder lol

InformationsquelleAutor DeborahK

11

Sie brauchen, um wieder eine beobachtbare Abschluss mit false
```
handleError() {
  return Observable.of([false]);
}
```
- Danke. Ich nahm die andere Antwort, denn es gibt ein vollständigeres Beispiel.
InformationsquelleAutor Günter Zöchbauer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.