Comment lancer une erreur de l'opérateur de carte RxJS (angulaire)

Je veux lancer une erreur de l' opérateur cartographique de mon observable en fonction d'une condition. Par exemple, si les données API correctes ne sont pas reçues. Veuillez consulter le code suivant:

private userAuthenticate( email: string, password: string ) {
    return this.httpPost(`${this.baseApiUrl}/auth?format=json&provider=login`, {userName: email, password: password})
        .map( res => { 
            if ( res.bearerToken ) {
                return this.saveJwt(res.bearerToken); 
            } else {
                // THIS DOESN'T THROW ERROR --------------------
                return Observable.throw('Valid token not returned');
            }
        })
        .catch( err => Observable.throw(this.logError(err) )
        .finally( () => console.log("Authentication done.") );
}

Fondamentalement, comme vous pouvez le voir dans le code, si la réponse (objet res) n'a pas 'bearerToken', je veux jeter une erreur. Ainsi, dans mon abonnement, il entre dans le 2ème paramètre (handleError) mentionné ci-dessous.

.subscribe(success, handleError)

Aucune suggestion?

Jetez simplement l'erreur dans l' map()opérateur. Tous les rappels dans RxJS sont encapsulés avec des blocs try-catch afin qu'ils soient interceptés puis envoyés en tant que errornotification.

Cela signifie que vous ne retournez rien et lancez simplement l'erreur:

map(res => { 
  if (res.bearerToken) {
    return this.saveJwt(res.bearerToken); 
  } else {
    throw new Error('Valid token not returned');
  }
})

Le throwError()(ancien Observable.throw()dans RxJS 5) est un observable qui envoie simplement une errornotification mais map()ne se soucie pas de ce que vous retournez. Même si vous renvoyez un observable, map()celui-ci sera transmis comme nextnotification.

Dernière chose, vous n'avez probablement pas besoin d'utiliser .catchError()(anciennement catch()dans RxJS 5). Si vous devez effectuer des effets secondaires lorsqu'une erreur se produit, il est préférable d'utiliser tap(null, err => console.log(err))(anciennement do()dans RxJS 5) par exemple.

Janvier 2019: mise à jour pour RxJS 6

Si vous sentez que cela throw new Error()semble inobservable, vous pouvez utiliser throwError(...)avec switchMapau lieu de map(la différence étant switchMaprenvoie une nouvelle observable):

// this is the import needed for throwError()
import { throwError } from 'rxjs';


// RxJS 6+ syntax
this.httpPost.pipe(switchMap(res => { 
   if (res.bearerToken) {
      return of(this.saveJwt(res.bearerToken)); 
   } 
   else {
      return throwError('Valid token not returned');  // this is 
   }
});

ou plus brièvement:

this.httpPost.pipe(switchMap(res => (res.bearerToken) ? 
                                    of(this.saveJwt(res.bearerToken)) : 
                                    throwError('Valid token not returned')
));

Le comportement sera le même, c'est juste une syntaxe différente.

Vous dites littéralement «basculer» de l'observable http dans le tube vers une autre observable, qui consiste soit simplement à «encapsuler» la valeur de sortie, soit à une nouvelle observable «erreur».

N'oubliez pas de mettre ofou vous obtiendrez des messages d'erreur déroutants.

La beauté de «switchMap» est également que vous pouvez renvoyer une toute nouvelle «chaîne» de commandes si vous le souhaitez - quelle que soit la logique dont vous avez besoin saveJwt.

Même si cette question est déjà répondue, j'aimerais partager ma propre approche (même si elle n'est que légèrement différente de celle ci-dessus).

Je déciderais de ce qui est renvoyé séparément du mappage et vice versa. Je ne sais pas quel opérateur est le meilleur pour cela, je vais donc l'utiliser tap.

this.httpPost.pipe(
  tap(res => { 
    if (!res.bearerToken) {
      throw new Error('Valid token not returned');
    }
  }),
  map(res => this.saveJwt(res.bearerToken)),
);