web-dev-qa-db-fra.com

Angular 2 - Vérification des erreurs de serveur lors de l'abonnement

Je pense que ce scénario devrait figurer dans la documentation Angular 2, mais je ne le trouve nulle part.

Voici le scénario

  1. soumettre un formulaire (créer un objet) non valide sur le serveur
  2. le serveur retourne une demande 400 avec des erreurs que j'affiche sur le formulaire
  3. après que l'abonnement revienne, je veux vérifier une variable d'erreur ou quelque chose (c'est-à-dire si aucune erreur> puis acheminer à la page de détail nouvellement créée)

J'imagine que ça marche quelque chose comme ça:

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

Je suis très nouveau sur Angular 2, ce qui peut venir de mon manque de compréhension du fonctionnement d'un observable. Je n'ai aucun problème à afficher ces données sur le formulaire, mais je ne vois pas comment les voir dans le composant ts. Je veux vraiment juste vérifier le succès/échec de la création http.

httpangularsubscribe
43
Stephanie

Comme indiqué dans la documentation RxJS correspondante, la méthode .subscribe() peut prendre un troisième argument appelé à la fin s'il n'y a pas d'erreur.

Pour référence:

  1. [onNext] (Function): Fonction à invoquer pour chaque élément de la séquence observable.
  2. [onError] (Function): Fonction à invoquer lors d'une fin exceptionnelle de la séquence observable.
  3. [onCompleted] (Function): Fonction à invoquer à la fin de la séquence observable.

Par conséquent, vous pouvez gérer votre logique de routage dans le callback onCompleted car elle sera appelée à la fin du processus (ce qui implique qu’il n’y aura aucune erreur lors de son appel).

this.httpService.makeRequest()
    .subscribe(
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // 'onCompleted' callback.
        // No errors, route to new page here
      }
    );

En guise de remarque, il existe également une méthode .finally() qui est appelée à la fin de l'opération, quel que soit le succès ou l'échec de l'appel. Cela peut être utile dans les scénarios dans lesquels vous souhaitez toujours exécuter certaines logiques après une requête HTTP quel que soit le résultat (c'est-à-dire à des fins de journalisation ou pour certaines interactions de l'interface utilisateur telles que l'affichage d'un mode modal).

Rx.Observable.prototype.finally(action)

Invoque une action spécifiée après la fin de la séquence observable source de manière élégante ou exceptionnelle.

Par exemple, voici un exemple de base:

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/finally';

// ...

this.httpService.getRequest()
    .finally(() => {
      // Execute after graceful or exceptionally termination
      console.log('Handle logging logic...');
    })
    .subscribe (
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // No errors, route to new page
      }
    );
94
Josh Crozier

Vous pouvez réaliser de la manière suivante

    this.projectService.create(project)
    .subscribe(
        result => {
         console.log(result);
        },
        error => {
            console.log(error);
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}
6
Pramod Patil