Estoy tratando de cargar varios archivos usando la función de obtención de jQuery. Un ejemplo mínimo se ve así:
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <select name="file-select" id="file-select" multiple> <option>http://url.to.file/Test1.txt</option> <option>http://url.to.file/Test2.txt</option> </select> <script> $(document).ready(function() { $('#file-select').change(function () { let loaded_files_list = new Array(); let promise = new Promise(function(myResolve,myReject) { $("#file-select option:selected").each(function () { file_name = $(this).val(); $.get($(this).val(), function(response) { data = response; // Do something with data console.log("file select length: "+$("#file-select option:selected").length); loaded_files_list.push(file_name); console.log('loaded files length: '+loaded_files_list.length) if(loaded_files_list.length == $("#file-select option:selected").length) { console.log('Entered if clause'); myResolve(loaded_files_list); } else { myReject('List is not complete yet'); } }); }); }); promise.then( function(value) { console.log('List is complete!'); console.log(value); }, function(error) { console.log(error); } ); }); }); </script> </body> </html> Ahora, si selecciono un solo archivo, esto funciona como se esperaba y puedo ver la lista con un solo elemento en la consola. Sin embargo, si selecciono ambos archivos, la cláusula if se ingresa después de cargar ambos archivos, pero parece que myResolve no se llama porque ninguna de las listas List is complete! no se muestra ni la lista con dos elementos. ¿Qué estoy haciendo mal aquí?
$(document).ready(() => { // make this a function that "waits" for the await command when // used on promises $('#file-select').change(async () => { // declare an array that we will use to store our HTTP requests const filesList = []; // extract the clicked options const selectedOpts = $('#file-select').children('option:selected') // loop over the clicked options selectedOpts.each((index, opt) => { // extract the text value from the option const link = opt.text // push the HTTP request to the filesList array without // waiting for the response filesList.push($.get(link)) }) // wait for the HTTP requests to to complete before // continuing const responses = await Promise.all(filesList) // loaded all files responses.forEach(data => { console.log(data) // => file contents }) }); });