javascript - 在嵌套 Promises 中使用时，来自外部作用域的数组被错误地报告为空

Question

我正在尝试使用 jQuery 和 Promise 异步收集数据。这是我的代码的简要说明:

(function () {
    let promises = [], results = [];
    const urls = ["https://cdn.jsdelivr.net/gh/rails/rails/MIT-LICENSE"];
    for (let url of urls) {
        let p = $.get(url).then(
            // The actual job is to parse the response and make new requests
            // but for simplicity I'll just make the same request again here
            () => promises.push(
                $.get(url).then(
                    data => results.push(data))));
        promises.push(p);
    }
    console.log("Start");
    Promise.all(promises).then(function () {
        console.log("Done");
        console.log(results);
    });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

奇怪的是，在 console.log 运行之前我可以看到明显的延迟，但我的控制台中出现了一个空数组。但是，如果我立即输入 results，我可以在那里看到预期的一切。我也没有看到任何错误。

我相信这与我在 promise 中嵌套 promise 有关，但我不知道如何找出错误。

Answer 1

这是使用 Promise.all 处理 promise 的方式.将 promise 推送到数组中。比解析那组 promise ，这将给出值的数组。

var promises = [];
for (let url of urls) {
    // Save promise in p
    let p = $.get(url)
    // push promise p in promises array
    promises.push(p);
}
// resolve all promises
Promise.all(promises).then(function (results) {
    console.log(results);
});

原始代码不起作用，因为对于每个 url，存储在 p 中的值是一个将解析为 undefined 的 promise，因为那时不返回任何内容。

(function () {
let promises = [], results = [];
const urls = ["https://cdn.jsdelivr.net/gh/rails/rails/MIT-LICENSE"];
for (let url of urls) {
    let p = $.get(url).then(d => {
    results.push(d);
    // return the value
    return d;
    });
    promises.push(p);
}
console.log("Start");
console.log(promises);
Promise.all(promises).then(function () {
    console.log("Done");
    console.log(results);
});
})();

这会起作用。