在继续之前等待异步 http 请求 angular

Question

我有任务组，这些组有任务。您可以将现有任务添加到您的组中，也可以创建新任务。这些新任务在我的 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);
            })

    };

我也尝试过使用 promises，通常我使用回调，但我读到了有关 $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 post 本身。

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

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

            return q.promise;
        };

Answer 1

你应该可以这样调用：

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

Answer 2

成功了。我 return 我的 http 调用作为一个承诺，而不是为它创建一个变量

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

在我的$q.all的"then"语句中调用函数"createtaskgroup"。无法真正解释它现在工作的细节，没有我承诺的临时变量，我没有收到 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);
            });
        });

    };

在继续之前等待异步 http 请求 angular

wait for async http requests before proceeding angular

asynchronous

mongodb

angularjs

q

angular-promise