Comment utiliser Async et Await avec Array.prototype.map ()

Utiliser async / await combiné avec map () peut être un peu délicat. Trouver comment.

Vous souhaitez exécuter une fonction asynchrone dans unmap()call, pour effectuer une opération sur chaque élément du tableau et récupérer les résultats.

Comment pouvez-vous faire cela?

Voici la syntaxe correcte:

const list = [1, 2, 3, 4, 5] //...an array filled with values

const functionWithPromise = item => { //a function that returns a promise
  return Promise.resolve('ok')
}

const anAsyncFunction = async item => { return functionWithPromise(item) }

const getData = async () => { return Promise.all(list.map(item => anAsyncFunction(item))) }

getData().then(data => { console.log(data) })

La principale chose à noter est l'utilisation dePromise.all(), qui se résout lorsque toutes ses promesses sont résolues.

list.map()renvoie une liste de promesses, donc dansresultnous obtiendrons la valeur lorsque tout ce que nous avons exécuté sera résolu.

Rappelez-vous, nous devons envelopper tout code qui appelleawaitdans unasyncfonction.

Voir learticle prometpour en savoir plus sur les promesses et leguide async / attente.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: