Cuando creo 3 promesas diferentes usando esta función:
const setTimer = (num) => { return new Promise((res, rej) => { setTimeout(() => { res(num) }, 2000); }) }y luego ejecútelos dentro de la función async/await:
const func = async () => { const first = await setTimer(1) console.log(first); const second = await setTimer(2) console.log(second); const third = await setTimer(3) console.log(third); } func()Se ejecutan sincrónicamente (uno tras otro) como se esperaba.
Luego creo 3 promesas diferentes usando nueva promesa directamente:
const setTimer1 = new Promise((res, rej) => { setTimeout(() => { res(1) }, 2000); }) const setTimer2 = new Promise((res, rej) => { setTimeout(() => { res(2) }, 2000); }) const setTimer3 = new Promise((res, rej) => { setTimeout(() => { res(3) }, 2000); })Y luego ejecute esas 3 promesas nuevamente en la función async/await:
const func1 = async () => { const first = await setTimer1 console.log(first); const second = await setTimer2 console.log(second); const third = await setTimer3 console.log(third); } func1()Ahora se ejecutan de forma asíncrona (en paralelo). Por favor, ayuda a explicar por qué. He buscado durante mucho tiempo pero no he encontrado la respuesta.
Es más fácil entender la diferencia comparando los siguientes ejemplos:
(async () => { const p1 = new Promise(resolve => setTimeout(resolve, 2000)); const p2 = new Promise(resolve => setTimeout(resolve, 2000)); const p3 = new Promise(resolve => setTimeout(resolve, 2000)); await p1; console.log(1); // 2 seconds later await p2; console.log(2); // 0 seconds later await p3; console.log(3); // 0 seconds later })(); Todas las Promesas se crean inmediatamente una tras otra, por lo que en el momento en que la primera está lista, todas lo están. Es por eso que obtendrá 1 , 2 y 3 en su consola al mismo tiempo.
Pero ahora considere este ejemplo:
(async () => { await new Promise(resolve => setTimeout(resolve, 2000)); console.log(1); // 2 seconds later await new Promise(resolve => setTimeout(resolve, 2000)); console.log(2); // 2 seconds later await new Promise(resolve => setTimeout(resolve, 2000)); console.log(3); // 2 seconds later })(); Esta vez, la segunda Promesa se instancia después de que se resuelve la primera, es decir, después de 2 segundos. Lo mismo ocurre con el tercero esperando al segundo. Y es por eso que obtendrá 1 después de 2 segundos, 2 después de otros 2 segundos y 3 después de otros 2 segundos.
Para entender por qué, basta saber que Promise intenta ser lo más rápido posible. Comienza su trabajo tan pronto como se crea. ¡Y eso es algo bueno!
Sus últimas tres declaraciones no son funciones. Asignan a cada una una promesa que se ejecuta en el momento en que se crea cada una. Por lo tanto, deben codificarse como el primero, donde la promesa se crea solo cuando se invoca la función:
const setTimer1 = () => new Promise((res, rej) => { setTimeout(() => { res(1) }, 2000); }) const setTimer2 = () => new Promise((res, rej) => { setTimeout(() => { res(2) }, 2000); }) const setTimer3 = () => new Promise((res, rej) => { setTimeout(() => { res(3) }, 2000); })Entonces necesitas invocar cada función:
const func1 = async () => { const first = await setTimer1(); console.log(first); const second = await setTimer2(); console.log(second); const third = await setTimer3(); console.log(third); } func1()Los cambios requeridos son muy sutiles , agregando solo unos pocos caracteres. Compare con su código para ver las diferencias.