在进行角度之前等待异步 http 请求答案

【问题标题】：wait for async http requests before proceeding angular在进行角度之前等待异步 http 请求
【发布时间】：2016-05-26 18:11:54
【问题描述】：

我有任务组，这些组有任务。您可以将现有任务添加到您的组，也可以创建新任务。这些新的在我的 mongoDB 中还没有 _id，所以我必须先创建它们，然后再调用 createTaskGroup。

当我调用 createTaskGroup 时，我循环执行任务，当没有 _id 时，我调用“addnewtask”。问题是，最后一个函数“apiFactory.createTaskGroup”在完成不存在任务的循环之前被调用。

如何在执行 createTaskGroup 之前等待这些函数完成？

 dvm.createTaskGroup = function (){
        for (var i = 0; i < dvm.taskgroup.tasks.length; i++) {
            if (angular.isUndefined(dvm.taskgroup.tasks[i]._id)) {

                apiFactory.addNewTask(dvm.taskgroup.tasks[i].description, function (response) {
                    dvm.taskgroup.tasks[i] = response;
                });
            }
        }

            apiFactory.createTaskGroup(dvm.taskgroup, function (response) {
                $mdDialog.hide(dvm.taskgroup);
            })

    };

我也尝试过使用 Promise，通常我使用回调，但我读到了 $q.all。所以我会试一试。但是我可以抱怨 cors，即使它和以前一样，但使用了 promise。

dvm.createTaskGroup = function (){
        var callsToWaitForBeforeContinue = [];

        var tempArrayWithTasksWithId = [];

        angular.forEach(dvm.taskgroup.tasks, function(task){
            if(angular.isUndefined(task._id)){
                callsToWaitForBeforeContinue.push(apiFactory.addNewTaskWithPromise(task.description));
            }
            else{
                tempArrayWithTasksWithId.push(task);
            }
        });

        $q.all(callsToWaitForBeforeContinue).then(function(req){
            dvm.taskgroup.tasks = tempArrayWithTasksWithId;

            angular.forEach(req, function(singlePromise){
                dvm.taskgroup.tasks.push(singlePromise);
            });
        });
            apiFactory.createTaskGroup(dvm.taskgroup, function (response) {
                $mdDialog.hide(dvm.taskgroup);
            });

    };

这是 http 帖子本身。

 var addNewTaskWithPromise = function(taskDescription){
            var q = $q.defer();

            $http.post(ENV.api + 'tasks/', taskDescription).then(function(response){
              q.resolve(response); 
            }, errorCallback);

            return q.promise;
        };

【问题讨论】：

您也可以发布您的工厂代码吗？这可能就是你想要使用 Promise 的地方。
你是说我的服务吗？最新的代码块是我的服务。我知道我的架构不是重点。这是为了我的实习，在四月之前我没有任何使用 Angular 的经验，甚至是一般的 javascript，我很高兴一切正常。

标签： angularjs mongodb asynchronous angular-promise q

【解决方案1】：

你应该可以这样调用：

apiFactory.addNewTaskWithPromise(task.description).then(function(response){
    dvm.taskgroup.tasks[i] = response;
    apiFactory.createTaskGroup(dvm.taskgroup).then(function (response2) {
        $mdDialog.hide(dvm.taskgroup);
    });
});

【讨论】：

如果length = 3，3次调用是否在调用“createTaskGroup”之前完成？我好像不是这样的

【解决方案2】：

让它工作。我将我的 http 调用作为一个承诺返回，而不是为它创建一个变量

    var addNewTaskWithPromise = function(taskDescription) {
        return $http.post(ENV.api + 'tasks', {
            "description": taskDescription
        });
    };

在我的$q.all 的“then”语句中调用函数“createtaskgroup”。无法真正解释为什么它现在起作用的细节，没有我的承诺的 temp 变量，我没有收到 CORS 错误，可能有人可以解释原因。

dvm.createTaskGroup = function() {
        var callsToWaitForBeforeContinue = [];

        var tempArrayWithTasksWithId = [];

        angular.forEach(dvm.taskgroup.tasks, function(task) {
            if (angular.isUndefined(task._id)) {
                callsToWaitForBeforeContinue.push(apiFactory.addNewTaskWithPromise(task.description));
            } else if(angular.isDefined(task._id)) {
                tempArrayWithTasksWithId.push(task);
            }
        });

        $q.all(callsToWaitForBeforeContinue).then(function(req) {
            dvm.taskgroup.tasks = tempArrayWithTasksWithId;

            angular.forEach(req, function(singlePromise) {
                dvm.taskgroup.tasks.push(singlePromise.data.task);
            });

            apiFactory.createTaskGroup(dvm.taskgroup, function(response) {
                $mdDialog.hide(dvm.taskgroup);
            });
        });

    };

【讨论】：