javascript - 简化嵌套的 Promise 和循环

Question

我正在构建一个 Angular 应用程序，我试图更好地理解 promise 当我处理异步调用(如 $http)时，我通常所做的是将它们包装在服务中，然后在我的 Controller 中调用它们，如下所示:

...

function whatever(arguments) {
    dataService.getUser(arguments)
        .then(onUserComplete)
        .then(dataService.getExtra)
        .then(onExtraComplete)
        .catch(onError);

    function onUserComplete(user) {
        //do something with user
        ...
        // return user id (because we are
        // supposing that getExtra is
        // requiring an id as argument)
        return user.id;
    }

    function onExtraComplete(extra) {
        // do something with extra
        // no need to return anything,
        // we are the last element of the
        // chain.
    }

    function onError(error) {
        console.log(error);
    }
}

...

这帮助我保持每个功能都易于理解和维护，易于阅读和一致......至少在我需要处理集合之前。假设我需要做与以前相同的事情，但我得到的不是一个用户，而是整个用户集合(并且我仍然需要获取每个用户的额外数据)。我所做的是这样的:

...

function whatever(arguments) {
    dataService.getUsers(arguments)
        .then(onUsersComplete)
        .catch(onError);

    function onUsersComplete(users) {
        users.forEach(function(user) {
            dataService.getExtra(user.id)
                .then(onExtraComplete)
                .catch(onError);
        });
    }

    ...
}

...

这是我尝试遵循我的编码风格所能获得的最好结果吗？甚至可以用单个 promise 链来解决我的问题吗？谢谢

Answer 1

您可以使用 Promise.all ( Documentation ) 来等待一系列 Promise。

dataService.getUsers(arguments)
    .then(users => users.map(
        user => dataService.getExtra( user.id )
    ))
    .then( Promise.all )
    .then( user_extra => /* get array with user data as result */ )
    .catch( onError );

我们将用户映射到函数返回的 promise 数组，然后使用 Promise.all 捆绑所有 promise 。在接下来的 .then() 中，所有用户额外数据都会加载并在结果数组中提供。