javascript - $q - 控制函数执行的顺序

Question

我是 AngularJS 的新手，我正在尝试构建一个带有 Promise 的函数，以便只有在前一个函数完成后才会运行某些内容。

我有一系列发票。除客户引用号外，每张发票均不存储客户信息。使用客户引用号，我想使用引用号在我的 API 中查询客户名称。

    $scope.invoices.forEach(function(invoice) {

        var defer = $q.defer();

        defer.promise.then(function(invoice) {

            var customer_id = invoice[$rootScope.data]["Id"][0].match(/\d+/)[0];

            $http.post('/customers', customer_id).success(function(response) {
                console.log("Response is: " + response);
                return response;
            });

        }).then(function(result) {
            invoice.customer_name = result;
            console.log("The final result is: " + result);
            return invoice.customer_name;
        });

        defer.resolve(invoice);
    });

注意:目前，我的 API 仅返回给定的引用号。

在我的控制台中，我看到以下输出:

(10) The final result is: undefined
Response is: 235
Response is: 239
Response is: 234
Response is: 238
Response is: 237
Response is: 236
Response is: 233
Response is: 232
Response is: 231
Response is: 230

如何保证第二个then仅在第一个之后运行？

Answer 1

这种情况下的典型方法是将 $q.all 与 Promise 数组一起使用。使用 Array.prototype.map 方法可以很方便地组成这样的数组:

var promises = $scope.invoices.map(function(invoice) {

    var customer_id = invoice[$rootScope.data]["Id"][0].match(/\d+/)[0];

    return $http.post('/customers', customer_id).then(function(result) {
        invoice.customer_name = result.data;
        console.log("The final result is: " + result);
        return invoice.customer_name;
    });
});

$q.all(promises).then(function(responses) {
    // console.log(responses);
});

当 $q.all promise 解决时，您应该获得按正确顺序排列的客户名称数组。