Sé que ya hay muchas preguntas similares, pero ninguna de ellas parece resolver este problema específico. Tengo una función Javascript que contiene un bucle forEach y dentro del bucle forEach hay llamadas asincrónicas.
El código se ve más o menos así:
const handleConvert = () => { const refs = { ...imageRefs.current } // Outer loop Object.keys(refs).forEach(key => { // Inner loop refs[key].forEach(ref => { toPng(ref) .then((dataUrl) => { props.setImageUrls(old => { return { ..old, [key]: [...old[key], dataUrl] } }) }) .catch(err => { console.error(err) }) }) }) setConverting(false) setConverted(true) } refs es un objeto que contiene 2 claves y cada clave tiene una matriz para su valor. Se ve algo como esto:
{ a: [1, 2, 3], b: [3, 4, 5] }La función toPng() devuelve una promesa. Estoy tratando de esperar a que se resuelvan todas esas promesas antes de ejecutar el código después del bucle forEach externo:
if (mounted) { setConverting(false) setConverted(true) }¿Hay alguna manera de esperar a que se resuelvan todas las promesas antes de ejecutar el código después del ciclo externo? ¿Quizás con Promise.all()?
Anide otro Promise.all para esperar a que finalice cada subarreglo. Asegúrese de mapear y devolver cada Promise a la persona que llama para que Promise.all funcione correctamente.
Promise.all( Object.entries(refs) .map(([key, arr]) => Promise.all( arr.map(num => toPng(num).then(dataUrl => { props.setImageUrls(old => ({ ...old, [key]: [...old[key], dataUrl] })) }) ) )) ) .then( // all done