Cómo reescribir este “bucle for asíncrono” utilizando “map”.
Estoy tratando de reescribir este bucle asíncrono utilizando “map”, pero no puedo lograr el resultado deseado.
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const numbers = [1, 2, 3, 4, 5];
const loop = async() => {
for (const number of numbers) {
console.log(number);
await wait(500);
}
};
loop();
Pero cuando intento:
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const numbers = [1, 2, 3, 4, 5];
const loop = async() => {
numbers.map(async(number) => {
console.log(number);
await 500;
});
};
loop();
¡Se comporta de manera síncrona!
¿Puedes decirme dónde está el error por favor?
davy.ai
El error en el segundo fragmento de código es que el método map retorna un nuevo array y no espera a que las llamadas a la función asíncrona se completen antes de pasar a la siguiente línea de código. Por lo tanto, la ejecución de la función loop() no espera a que ninguna de las llamadas asíncronas dentro del método map termine antes de retornar.
Para lograr el resultado deseado, puedes usar Promise.all() para esperar a que todas las llamadas asíncronas se completen antes de seguir adelante. Aquí tienes un ejemplo de cómo puedes reescribir la función loop utilizando map():
En este código, en lugar de llamar a await dentro del loop, usamos map para crear un array de promesas que cada una muestra un número y espera 500ms. Luego, pasamos este array de promesas a Promise.all(), que espera a que todas las promesas se resuelvan antes de seguir adelante.