Utiliser asynchrone attendent avec Tableau.carte

Donné le code suivant:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
        await callAsynchronousOperation(item);
        return item + 1;
    });

qui génère l'erreur suivante:

TS2322: Type de la Promesse de la<nombre>[]' n'est pas assignable à type de numéro[]'.
Type de la Promesse de la<nombre> n'est pas cessible de type "nombre".

Comment puis-je résoudre ce problème? Comment puis-je faire async await et Array.map travailler ensemble?

  • Pourquoi essayez-vous de faire une opération synchrone dans une opération asynchrone? arr.map() est synchrone et ne retourne pas une promesse.
  • Vous ne pouvez pas envoyer une opération asynchrone à une fonction, comme map, qui attend synchrone un, et espérer qu'il fonctionne.
  • J'ai beaucoup attendent des déclarations à l'intérieur de la fonction. C'est en fait une longue fonction et j'ai juste simplifié pour le rendre lisible. J'ai ajouté maintenant attendre l'appel pour le rendre plus clair pourquoi il doit être asynchrone.
  • Vous avez besoin d'attendre quelque chose qui renvoie une promesse, pas quelque chose qui renvoie un tableau.
  • async/await ne fait pas partie de l'ES7.
  • Une chose utile à réaliser, c'est que chaque fois que vous marquez une fonction comme async, vous réalisez que la fonction de retour d'une promesse. Alors, bien sûr, une carte de async retourne un tableau de promesses 🙂

InformationsquelleAutor Alon | 2016-10-19
  1. 307

    Le problème ici est que vous essayez de await un tableau de promesses plutôt qu'une promesse. Ce n'est pas faire ce que vous attendez.

    Lorsque l'objet passé en await n'est pas une Promesse, await renvoie simplement la valeur est immédiatement au lieu d'essayer de le résoudre. Donc, depuis que vous avez passé await un tableau (de la Promesse d'objets) ici au lieu d'une Promesse, la valeur retournée par l'attendent est tout simplement ce tableau, qui est de type Promise<number>[].

    Ce que vous devez faire ici est de les appeler Promise.all sur le tableau retourné par map en vue de le convertir en une seule Promesse avant awaiting il.

    Selon la MDN docs pour Promesse.all:

    La Promise.all(iterable) méthode renvoie une promesse qui résout
    lorsque toutes les promesses de l'itérable argument est résolu, ou
    rejette avec la raison de la première passé promesse qui le rejette.

    Donc dans votre cas:

    var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

    Cela permettra de résoudre l'erreur spécifique que vous rencontrez ici.

    • Ce qui ne l' : deux points de dire?
    • C'est pour les annotations de type en caractères d'imprimerie.
    InformationsquelleAutor Ajedi32
  2. 13

    Il y a une autre solution, si vous n'êtes pas natif à l'aide de Promesses, mais la Bluebird.

    Vous pouvez également essayer d'utiliser Promesse.map(), le mélange de la matrice.la carte et de la Promesse.tous les

    Dans votre cas: 

      var arr = [1,2,3,4,5];

  var results: number[] = await Promise.map(arr, async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
  });
    • Il est différent, il n'a pas d'exécuter toutes les opérations en parallèle, mais plutôt les exécute en séquence.
    • ou Promise.each sont sequencial, Promise.map commence tous à la fois.
    • vous pouvez exécuter toutes ou certaines opérations en parallèle en fournissant concurrency option.
    • Il est important de mentionner que ce n'est pas un vanilla JS.
    InformationsquelleAutor Gabriel Cheung
  3. 6

    Si vous associez à un tableau de Promesses, vous pouvez résoudre tous à un tableau de nombres. Voir Promesse.tous.

    InformationsquelleAutor Dan Beaulieu
  4. 1

    Je vous recommande d'utiliser Promesse.tout comme mentionné ci-dessus, mais si vous vous sentez vraiment comme éviter cette démarche, vous pouvez faire un pour ou de tout autre boucle:

    const arr = [1,2,3,4,5];
let resultingArr = [];
for (let i in arr){
  await callAsynchronousOperation(i);
  resultingArr.push(i + 1)
}
    • De La Promesse.tous seront async pour chaque élément du tableau. Ce sera une synchronisation, il faut attendre de terminer un élément dans l'ordre de commencer la suivante.
    InformationsquelleAutor Beckster