La siguiente función se ejecuta después de una operación de arrastrar y soltar de varios archivos.
function getFilesInfo(ev){ for (let i = 0; i < ev.dataTransfer.items.length; i++) { if (ev.dataTransfer.items[i].kind === 'file') { let file = ev.dataTransfer.items[i].getAsFile(); //getFileInfo adds string to DOM element //Note the promise usage ... file.arrayBuffer().then((data)=>getFileInfo(file.name,data)); } } }No puedo averiguar cómo llamar a una función después de que finalicen todas las promesas en esta función.
Básicamente quiero algo como esto, secuencialmente:
getFilesInfo(ev); //getFileInfo(<file1>); //getFileInfo(<file2>); //getFileInfo(<file3>); // etc. //run only after all getFileInfo() calls have finished processResults(); La parte complicada es que leer los archivos genera una promesa para cada archivo que se llama cuando el archivo se ha leído en la memoria (parte de la llamada arrayBuffer() ). No puedo averiguar cómo retrasar los resultados del getFilesInfo processResults después de que se hayan activado todas las llamadas de lectura, no (por lo que puedo decir), después de que las funciones getFileInfo hayan terminado.
Parece que tal vez podría agregar de alguna manera todas las llamadas de arrayBuffer a una matriz y luego hacer un encadenamiento de promesas (¿quizás?), Pero eso parece incómodo y ni siquiera estoy seguro de cómo lo haría.
Podrías hacerlo de esa manera:
function getFilesInfo(ev){ return ev.dataTransfer.items.filter(item=>item.kind === 'file').map(item=>{ let file = item.getAsFile(); return file.arrayBuffer().then((data)=>getFileInfo(file.name,data)); }); } Promise.all(...getFilesInfo(ev)).then(_=>{ processResults(); }); // or with async/await (async ()=>{ await Promise.all(...getFilesInfo(ev)); processResults(); })()Puede usar Promise.all para esperar a que termine una serie de promesas:
async function getFilesInfo(ev) { // create list of jobs const jobs = []; for (const item of ev.dataTransfer.items) { if (item.kind === 'file') { let file = item.getAsFile(); jobs.push(file.arrayBuffer().then(data => { getFileInfo(file.name, data); })); } } // wait for all promise to fullfil await Promise.all(jobs); }https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
El obstáculo conceptual con el que me estaba encontrando era que estaba pensando en la función then como una devolución de resultados, no de promesas. Además, muchos de los ejemplos que he visto con Promise.all generalmente solo concatenan llamadas explícitas, no construyen una matriz en un bucle.
Como sugirió Bergi, simplemente agregué las llamadas a una matriz y luego pasé esa matriz a Promise.all
function getFilesInfo(ev) { // create list of jobs let jobs = []; for (const item of ev.dataTransfer.items) { if (item.kind === 'file') { let file = item.getAsFile(); jobs.push(file.arrayBuffer().then(data => { getFileInfo(file.name, data); })); } } return jobs; } //The call in the parent let jobs = getFilesInfo(ev); Promise.all(jobs).then(processResults);