如何使用 jQuery 的 get 函数加载多个文件？

Question

我正在尝试使用 jQuery 的获取函数加载多个文件。一个最小的例子如下所示：

<!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>

现在，如果我 select 单个文件，它会按预期工作，我可以在控制台中看到包含单个项目的列表。但是，如果我 select 这两个文件，则在加载两个文件后输入 if 子句，但似乎 myResolve 未被调用，因为既不显示 List is complete! 也不显示包含两个元素的列表。我在这里做错了什么？

Answer 1

$(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
    })
  });
});

如何使用 jQuery 的 get 函数加载多个文件？

How to load multiple files using jQuery's get function?

javascript

ajax

jquery