Promise API - 结合 2 个异步调用的结果

Question

使用promise API，如何并行发送两个异步请求，并将合并的结果解析为响应。

var get = function(id){
            var res1, res2;
            var deferred = $q.defer();
            Db.get(id, "abc")
                .then(function (d) {
                    //deferred.resolve(d));
                    res1 = d;
                }, function (e) {
                    //error
                });

            Db.get(id, "def")
                .then(function (d) {
                    //deferred.resolve(d));
                    res2 = d;
                }, function (e) {
                    //error
                });

            //?????? how to return {res1:res1 , res2: res2}

            return deferred.promise;
        };

现在，当我像这样调用 get() 时

get(123).then(function(d)){
// d= {res1: res1, res2: res2}
},
...

我需要得到所示的组合结果。如何使用 Angular Promise API 做到这一点？

Answer 1

正如@Matt 所说，您需要使用$q.all，但用法不太正确。 AngularJS 不支持.done 和.fail，而且它们的工作方式也不像那样，因为没有对多个值的承诺，而是对数组的承诺。

如果您使用完整的Q 来写这篇文章，我们会这样写：

var get = function (id) {
    return Q.all([Db.get(id, "abc"), Db.get(id, "def")])
        .spread(function (res1, res2) {
            return {res1: res1, res2: res2};
        });//the error case is handled automatically
};

在这种情况下，.spread 的行为类似于.then，不同之处在于它将用于承诺的数组的结果传播到其onFulfilled 函数的参数上。要更改它以使用来自 AngularJS 的 promise 方法，我们只需要不使用.spread。这导致了以下解决方案：

var get = function (id) {
    return $q.all([Db.get(id, "abc"), Db.get(id, "def")])
        .then(function (res) {
            return {res1: res[0], res2: res[1]};
        });//the error case is handled automatically
};

这样做的好处是我们可以从处理错误传播的所有细节和存储部分结果中解脱出来，因​​为.then 充当过滤器。如果您忽略错误处理程序，它会自动传播任何错误。这意味着如果任何一个输入承诺被拒绝，结果将被拒绝。如果两个承诺都成功实现，则 res 是这些分辨率值的数组。

Answer 2

我有一些东西要添加到@ForbesLindesay 的答案中。

在我们的例子中，我们想要部分结果：如果请求失败（例如，服务器出现故障，我们请求被其他人删除的内容等），我们仍然希望收集有效响应并报告错误.

我发现我们需要处理每个 promise 的成功和失败，返回一个将由$q.all 收集的值。

这是我们的代码，简化并通用化（'item'...）：

var promiseList = _.map(itemList, function(item)
{
    return DataService.getISubtems(item.id)
        .then(
            function(response)
            {
                var subItems = response.data;
                $log.info('Received sub-item list;' + subItems.length + ';items received');
                return subItems;
            },
            function(reason)
            {
                $log.warn('Sub-item list not received for item;' + item.name + ';' + item.id);
                $scope.errorList.push('Sub-item list not received for item "' + item.name + '"');
            }
        );
});
$q.all(promiseList)
    .then(function(itemArray)
    {
        // We get an array of arrays interleaved with undefined value when an error was raised.
        // That's because error handling doesn't return anything, ie. returns undefined.
        // We remove these undefined values then put all operations at the same level.
        var allOperations = _(operationArray).reject(_.isUndefined).flatten().value();
        if ($scope.errorList.length > 0)
        {
            NotificationService.warning('Items Fetching', 'Errors while getting item list:\n' +
                $scope.errorList.join('\n'));
        }
        $scope._onItemListReceived(allItems);
    });

请注意，我们使用 Lodash（_.map、_.flatten、_.reject、_.isUndefined），但我认为用法非常明确（这是这个库的优点！）。

Answer 3

您可以使用angular-q-spread 库，然后使用与@ForbesLindesay 的第一个示例相同的代码：

// The module needs $q-spread as a dependency:
// angular.module('…', ['$q-spread']);

var get = function (id) {
    return $q.all([Db.get(id, "abc"), Db.get(id, "def")])
        .spread(function (res1, res2) {
            return {res1: res1, res2: res2};
        });
};