Appels multiples d'Api en série dans angular 6

Question

Je dispose de 20 API. Mon objectif est de créer une page. Lorsque la page sera chargée, je veux que toutes mes API soient appelées, chargent les données et les stockent dans plusieurs variables de type tableau. Mais si j'appelle toutes les API à l'initialisation, cela prend trop de temps pour charger la page. Je veux maintenant appeler les API une par une automatiquement à l'initialisation de la page. Pouvez-vous me donner une idée de la façon dont ces APIs peuvent être appelées une par une en série ? Si j'utilise la clause if, c'est-à-dire si(respose) à la fin de chaque API promet que le code semble trop long.

Answer 1

Pourquoi ne pas appeler les api avant d'en avoir réellement besoin, par exemple en utilisant un resolver pour récupérer les données via un appel api avant qu'une route ne soit chargée. Mais si vous avez vraiment besoin de toutes les données au départ, vous devez peut-être les optimiser, ou faire un appel à l'API pour récupérer toutes les données. Plutôt que 20.

Résolveur avec l'exemple de Ng5 : https://www.concretepage.com/angular-2/angular-resolve-guard-example

Recherche de la résolution : https://angular.io/guide/router

Answer 2

Puisque vous n'avez pas de code à nous montrer, j'ai fait un petit stackblitz pour vous montrer comment faire cela avec mergeMap ou forkJoin en utilisant des fonctions uniques qui renvoient un Observable et en utilisant mergeMap , forkJoin ou concatMap en utilisant un tableau d'identifiants pour appeler la fonction de manière dynamique.

Voir, mergeMap exécutera le code que vous avez et les suivra indépendamment, donc l'ordre de retour de votre fonction ne sera pas nécessairement le même. concatMap respecte cela et essaie de les exécuter dans l'ordre. forkJoin attendra patiemment qu'ils soient tous terminés, puis vous renverra un Observable à laquelle vous pouvez vous abonner et obtenir un tableau de toutes les valeurs de retour de la fonction Observable votre fonction est revenue.

Il est préférable de jeter un coup d'œil au code et de cliquer une ou deux fois. Voici le stackblitz.

Vous devriez regarder concatAll Vous pouvez également créer un Observable contenant des Observables internes et utiliser la fonction concatAll pour s'abonner automatiquement à l'Observable suivant dans l'ordre après la fin de l'Observable précédent, voici le lien vers learnrxjs.io une très bonne source pour les débutants.

J'espère que cela vous aidera.

Answer 3

J'ai résolu mon propre problème.

of(...urls).pipe(
  concatMap((url: string) => this.getHTTP.getData(url)))
  .subscribe((result) => {
    this.resultArray.push(result);
    console.log('this.resultArray', this.resultArray);

la fonction concatMap() qui permet aux urls d'être frappées l'une après l'autre. Pour une meilleure compréhension, je poste la capture d'écran de la cascade d'appels API dans le réseau.