Tengo una función llamada printLetters() que imprime letras después de 1000ms. Esperaba que imprimiera letras de una en una con un retraso de 1000 ms, pero imprime todas las letras a la vez. Funciona cuando lo convierto a la función asíncrona. Sin embargo, ¿cómo hago para que printLetters() resuelva cada promesa con retraso sin async/await?
const printLetters = (l) => { for (let i = 0; i < l.length; i++) { delay(1000).then(() => { console.log(l[i]); }) } } const printLettersAsync = async(l) => { for (let i = 0; i < l.length; i++) { await delay(1000); console.log(l[i]); } } const delay = (t) => { return new Promise(res => setTimeout(res, t)) } const arr = ['a','b','c'] printLetters(arr) printLettersAsync(arr)Multiplique el número que pasa al delay por el índice de iteración.
const printLetters = (letters) => { for (let i = 0; i < letters.length; i++) { delay(1000 * i).then(() => { console.log(letters[i]); }) } } const delay = (t) => { return new Promise(res => setTimeout(res, t)) } const arr = ['a','b','c'] printLetters(arr) Pero no tiene mucho sentido una función de retraso a la que pasa una devolución de llamada: setTimeout es más fácil.
const printLetters = (letters) => { for (let i = 0; i < letters.length; i++) { setTimeout(() => console.log(letters[i]), i * 1000); } } const arr = ['a','b','c'] printLetters(arr)Para emular await , debe convertir su función en una función recursiva. Lo que esto significa es que debe abandonar el bucle for y crear su propio código de bucle utilizando la recursividad:
const printLoop = (l, callback) => { if (l.length > 0) { const letter = l.shift(); console.log(letter); delay(1000).then(() => printLoop(l,callback)); // this is the loop } else { callback(); // we're done } } const printLetters = (l, cb) => { const letters = Array.from(l); // Copy the array // to avoid side effects. // This is optional but // included to retain similar // behavior to original code. printLoop(letters, cb); } const arr = ['a','b','c']; printLetters(arr, () => console.log('done printing letters')); Esto es lo que hace await . Vuelve a compilar su código en una estructura similar al ejemplo anterior.