web-dev-qa-db-fra.com

Utilisez correctement les appels Async avec Angular 5

Je recherche sur Google depuis quelques jours et j'ai trouvé de nombreux scénarios différents sur la façon d'utiliser les appels d'API Async avec Angular 5 (ou 2-3-4, peu importe)).

Quelqu'un peut-il me donner un exemple correct (un bon cas d'utilisation) à ce sujet?

ex.

  • passer un appel API en utilisant (async - try - catch)
  • comment "s'abonner" à cet appel au niveau d'un composant

Merci !

angularasynchronousasync-await
8
bgrujoski

Je vais vous donner une réponse basée sur mon avis et comment j'ai appris. Alors ne le prenez pas pour la vérité absolue, mais remettez-le en question!

Tout d'abord, vous devez savoir que dans TypeScript, il existe deux façons d'effectuer des appels asynchrones: Promises et Observables.

Les promesses sont natives dans ES6, les observables font partie de Rx JS.

Mais lequel utiliser?

Puisque c'est mon avis, je vais vous dire d'utiliser Observables, car

  • Ils peuvent être arrêtés
  • Ils peuvent être rejoués
  • Ils ont beaucoup d'opérateurs utiles
  • Ils peuvent gérer plusieurs valeurs

Tout cela, les promesses ne peuvent pas le faire.

Passer un appel API

Importez le module

Très simple: vous devez d'abord importer le module responsable de cela:

import { HttpClientModule } from '@angular/common/http';
// ...
imports: [HttpClientModule]

Il s'agit du nouveau service http amélioré en Angular 5. Je vous recommande fortement de l'utiliser, car l'ancien (Http) sera bientôt être obsolète.

Utilisez le service HttpClient

Maintenant, dans vos services, vous pouvez utiliser le HttpClient comme ça

import { HttpClient } from '@angular/common/http';
// ...
constructor(
  private http: HttpClient
) {}
// ...
getAny(): Observable<any> {
  return this.http.get<any>('url'); // request options as second parameter
}

Utilisez le service aux entreprises

Dans votre composant, vous pouvez maintenant faire

import { MyService } from '../myservice/myservice.service';
// ..
constructor(private myService: MyService) {
    this.myService.getAny().subscribe(() => {});
}
// ..

Information complémentaire

Gestion des erreurs ou des chargeurs

Supposons que vous souhaitiez afficher une barre de progression ou gérer les erreurs: pour ce faire, vous devrez utiliser Interceptors. Les intercepteurs sont des services qui intercepteront votre demande avant (ou après) son envoi et feront quelque chose.

Voici un intercepteur simple pour les erreurs:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ErrorHandlerService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .catch(err => {
        console.log('error occured');
        return Observable.throw(err);
      });
  }
}

Pour l'utiliser, indiquez simplement votre valeur dans votre module:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerService, multi: true }
]

Je pense que vous l'avez deviné, mais vous pouvez également l'utiliser pour gérer les barres de progression;)

S'abonner à un observable et utiliser async

Comme vous l'avez déjà vu, vous pouvez vous abonner à un appel http.

Si vous souhaitez gérer des erreurs spécifiques et faire de la logique dans votre composant, voici comment:

myService.getAny().subscribe(
  responseAfterSuccess => {},
  responseAfterError => {}
);

Avec ce code, vous gérerez le succès et l'erreur.

Dernière chose, le pipe async: le pipe async transforme un observable en données. Pour l'utiliser, faites-le

this.myVar = myService.getAny();

Votre variable myVar contiendra un observable. Maintenant, dans votre HTML, avec ce

<div *ngFor="let item of myVar | async">{{ item }}</div>

Angular va attendre que les données arrivent avant d'afficher quoi que ce soit, et transformera l'Observable en données, comme si vous l'aviez fait à la main.

25
user4676340