Cómo utilizar Async y Await con Array.prototype.map()

Usar async/await combinado con map() puede ser un poco complicado. Descubre cómo.

Desea ejecutar una función asíncrona dentro de una map()llamada, para realizar una operación en cada elemento de la matriz y obtener los resultados.

¿Cómo puedes hacerlo?

Esta es la sintaxis correcta:

const list = [1, 2, 3, 4, 5] //...an array filled with valuesconst functionThatReturnsAPromise = item = { //a function that returns a promise return Promise.resolve('ok')}const doSomethingAsync = async item = { return functionThatReturnsAPromise(item)}const getData = async () = { return Promise.all(list.map(item = doSomethingAsync(item)))}getData().then(data = { console.log(data)})

Lo principal a tener en cuenta es el uso de Promise.all(), que se resuelve cuando se resuelven todas sus promesas.

list.map()devuelve una lista de promesas, por lo que resultobtendremos el valor cuando se resuelva todo lo que ejecutamos.

Recuerde, debemos incluir cualquier código que llame awaita una asyncfunción.

Consulte el artículo sobre promesas para obtener más información sobre las promesas y la guía async/await.

Puede resultar difícil visualizar el ejemplo con esos nombres de funciones de marcador de posición, por lo que un ejemplo simple de cómo usar esta técnica es esta función de eliminación de datos de Prisma que escribí para un clon de Twitter para eliminar primero los tweets y luego los usuarios:

export const clearData = async (prisma) = { const users = await prisma.user.findMany({}) const tweets = await prisma.tweet.findMany({}) const deleteUser = async (user) = { return await prisma.user.delete({ where: { id: user.id } }) } const deleteTweet = async (tweet) = { return await prisma.tweet.delete({ where: { id: tweet.id } }) } const deleteTweets = async () = { return Promise.all(tweets.map((tweet) = deleteTweet(tweet))) } const deleteUsers = async () = { return Promise.all(users.map((user) = deleteUser(user))) } deleteTweets().then(() = { deleteUsers() })}

Técnicamente esto podría resumirse mucho más fácilmente comoTe recomendamos Guía de Marrakech | Turismo y consejos para el viaje

export const clearData = async (prisma) = { await prisma.tweet.deleteMany({}) await prisma.user.deleteMany({})}

pero el código anterior también es válido y muestra cómo usar promesas en Array.map(), que es el objetivo de este tutorial.

Tips para principiantes de JavaScript

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar Async y Await con Array.prototype.map()

Desea ejecutar una función asíncrona dentro de una map()llamada, para realizar una operación en cada elemento de la matriz y obtener los resultados. Usar as

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente