向Promise.all（）添加一个Promise

Question

我有一个api调用，有时会返回分页的响应。我想自动将这些添加到我的诺言中，以便在所有数据到达后获取回调。

这是我的尝试。我希望添加新的承诺，并在完成后解决Promise.all。

实际发生的是Promise.all不等待第二个请求。我的猜测是Promise.all在调用时会附加“侦听器”。

有没有办法“重新初始化” Promise.all（）？

function testCase (urls, callback) {
    var promises = [];
    $.each(urls, function (k, v) {
        promises.push(new Promise(function(resolve, reject) {
            $.get(v, function(response) {
                if (response.meta && response.meta.next) {
                    promises.push(new Promise(function (resolve, reject) {
                        $.get(v + '&offset=' + response.meta.next, function (response) {
                            resolve(response);
                        });
                    }));
                }
                resolve(response);
            }).fail(function(e) {reject(e)});
        }));
    });

    Promise.all(promises).then(function (data) {
        var response = {resource: []};
        $.each(data, function (i, v) {
            response.resource = response.resource.concat(v.resource);
        });
        callback(response);
    }).catch(function (e) {
        console.log(e);
    });
}   

所需的流程类似于：

1. 创建一组承诺。
2. 一些承诺产生更多的承诺。
3. 一旦所有最初的承诺和衍生的承诺都解决，请调用回调。

Answer 1

看起来总体目标是：

1. 对于 中的每个条目urls，调用$.get并等待其完成。
   • 如果它只返回一个没有“下一个”的响应，则保留该响应
   • 如果它返回带有“下一个”的响应，我们也想请求“下一个”，然后保留它们。
2. response当所有工作完成时调用回调。

我会改变#2，这样你只需返回承诺并用 来履行它response。

Promise 的一个关键点是then返回一个新的Promise，该 Promise 将根据您返回的内容进行解析：如果您返回一个不可 thenable 的值，则该 Promise 将用该值来实现；如果您返回 thenable，则承诺将解析为您返回的 thenable。这意味着如果您有承诺来源（$.get在本例中为 ），您几乎永远不需要使用new Promise; 只需使用您创建的承诺即可then。（和catch。）

（如果术语“thenable”不熟悉，或者您不清楚“fulfill”和“resolve”之间的区别，我会在我的博客上的这篇文章中介绍 Promise 术语。）

看评论：

function testCase(urls) {
    // Return a promise that will be settled when the various `$.get` calls are
    // done.
    return Promise.all(urls.map(function(url) {
        // Return a promise for this `$.get`.
        return $.get(url)
            .then(function(response) {
                if (response.meta && response.meta.next) {
                    // This `$.get` has a "next", so return a promise waiting
                    // for the "next" which we ultimately fulfill (via `return`)
                    // with an array with both the original response and the
                    // "next". Note that by returning a thenable, we resolve the
                    // promise created by `then` to the thenable we return.
                    return $.get(url + "&offset=" + response.meta.next)
                        .then(function(nextResponse) {
                            return [response, nextResponse];
                        });
                } else {
                    // This `$.get` didn't have a "next", so resolve this promise
                    // directly (via `return`) with an array (to be consistent
                    // with the above) with just the one response in it. Since
                    // what we're returning isn't thenable, the promise `then`
                    // returns is resolved with it.
                    return [response];
                }
            });
    })).then(function(responses) {
        // `responses` is now an array of arrays, where some of those will be one
        // entry long, and others will be two (original response and next).
        // Flatten it, and return it, which will settle he overall promise with
        // the flattened array.
        var flat = [];
        responses.forEach(function(responseArray) {
            // Push all promises from `responseArray` into `flat`.
            flat.push.apply(flat, responseArray);
        });
        return flat;
    });
}

请注意我们从不使用catch那里；我们将错误处理推迟给调用者。

用法：

testCase(["url1", "url2", "etc."])
    .then(function(responses) {
        // Use `responses` here
    })
    .catch(function(error) {
        // Handle error here
    });

该testCase函数看起来很长，但这只是因为注释。这是没有它们的情况：

function testCase(urls) {
    return Promise.all(urls.map(function(url) {
        return $.get(url)
            .then(function(response) {
                if (response.meta && response.meta.next) {
                    return $.get(url + "&offset=" + response.meta.next)
                        .then(function(nextResponse) {
                            return [response, nextResponse];
                        });
                } else {
                    return [response];
                }
            });
    })).then(function(responses) {
        var flat = [];
        responses.forEach(function(responseArray) {
            flat.push.apply(flat, responseArray);
        });
        return flat;
    });
}

...如果我们使用 ES2015 的箭头函数，它会更加简洁。:-)

在您提出的评论中：

如果有下一个，这个可以处理吗？喜欢第 3 页的结果吗？

我们可以通过将该逻辑封装到一个我们使用的函数中来实现这一点$.get，我们可以递归地使用该函数：

function getToEnd(url, target, offset) {
    // If we don't have a target array to fill in yet, create it
    if (!target) {
        target = [];
    }
    return $.get(url + (offset ? "&offset=" + offset : ""))
        .then(function(response) {
            target.push(response);
            if (response.meta && response.meta.next) {
                // Keep going, recursively
                return getToEnd(url, target, response.meta.next);
            } else {
                // Done, return the target
                return target;
            }
        });
}

那么我们的maintestCase就更简单了：

function testCase(urls) {
    return Promise.all(urls.map(function(url) {
        return getToEnd(url);
    })).then(function(responses) {
        var flat = [];
        responses.forEach(function(responseArray) {
            flat.push.apply(flat, responseArray);
        });
        return flat;
    });
}