javascript - AngularJS Controller 中的顺序执行

Question

我在 Angular Controller 中有调用服务的方法；此方法应根据服务响应进行操作。

但我不知道为什么该方法在正确的时间调用。

$scope.UpdateSelected = function () {
    $rootScope.showConfirmModal().result.then(function () {
        var selectedItems = _.filter($scope.Options, { Selected: true });
        var error = 0

        for (var i = 0 ; i < selectedItems.length; i++) {
            InvalidOptionsFactory.UpdateOptions(selectedItems[i].Id).then(function (res) {
                if (res.data.error) {
                    error++;
                }
            });
        }
            if (error == 0) {
                toastr.success($rootScope.GetString('GENERIC_SAVE_SUCCSS_MSG'));
            }

            else if (error == selectedItems.length) {
                $rootScope.showMessageModal($rootScope.GetString('UPDATE_STATUS_FAILED'), 'sm');
            }
            else {
                var message = hasError + $rootScope.GetString('UPDATE_STATUS_PARTIALLY_FAILED');
                toastr.success(message);
            }
            fetchSearchedData();
    });
    };

我现在不明白为什么直接转到if语句并执行它然后调用服务

Answer 1

这是因为 InvalidOptionsFactory.UpdateOptions(selectedItems[i].Id) 方法是异步的。这就是为什么应用程序不会等待服务调用，而是首先运行 if (error == 0) 语句(请参阅下面的代码片段以获取证明)。在这里学习异步方法:https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript

你可以将你的代码变成这样的(p.s.我使用 babel 作为预处理器):

$scope.UpdateSelected = function () {
  $rootScope.showConfirmModal().result.then(function () {
    var selectedItems = _.filter($scope.Options, { Selected: true });
    checkForError(selectedItems).then(error => {
      if (error == 0) {
        toastr.success($rootScope.GetString('GENERIC_SAVE_SUCCSS_MSG'));
      } else if (error == selectedItems.length) {
        $rootScope.showMessageModal($rootScope.GetString('UPDATE_STATUS_FAILED'), 'sm');
      } else {
        var message = hasError + $rootScope.GetString('UPDATE_STATUS_PARTIALLY_FAILED');
        toastr.success(message);
      };

      fetchSearchedData();
    });
  });
};

function checkForError(selectedItems): Promise<number> {
  return new Promise(resolve => {
    var error = 0;
    for (var i = 0 ; i < selectedItems.length; i++) {
      InvalidOptionsFactory.UpdateOptions(selectedItems[i].Id).then(function (res) {
        if (res.data.error) {
          error++;
        };
      });
    };

    resolve(error); 
  });
}

function asyncFunc(): Promise<void> {
  return new Promise(resolve => {
    console.log("this is async");
    resolve();
  });
}

asyncFunc().then(() => {
  console.log("async function ended");
});

console.log("this will be called before async function ended");