用 angularjs 在 foreach 中承诺答案

【问题标题】：Promise in foreach with angularjs用 angularjs 在 foreach 中承诺
【发布时间】：2016-04-30 18:25:32
【问题描述】：

我的承诺有问题，

$scope.refreshProject = function () {
    project.getAll().then(function(results) {
        angular.forEach(results, function(project) {
            project_path = project.path;
            project_file = project.file;
            project_id = project.id;

            console.log(project);
            console.log('http://' + project_path + '/' + project_file);

            $http.get('http://' + project_path + '/' + project_file)
                .then(function(res){
                    var project = new Project();
                    project.update(project_id, { 'content': res.data });
                });

        });

        $scope.refresh();
    });
};

我的 $http.get 不起作用，

console.log('http://' + project_path + '/' + project_file);

'http:///'

我的变量是空的。

project.model.js

Project.prototype.getAll = function () {
    return ProjectService.getAll();
};

project.service.js

this.getAll = function (params) {
    var projects = [];
    return db.selectAll('projects').then(function(results) {
        for(var i=0; i < results.rows.length; i++){
            projects.push(results.rows.item(i));
        }
        return projects;
    });
};

当我有来自 project.path 和 project.file 的参数正常时，我如何执行我的 $http 请求？

已解决

    project.getAll().then(function(results) {
        angular.forEach(results, function(project) {
            (function(project) {
                var project_id = project.id;

                if (project.path) {
                    var promise = $http.get(project.path + '/' + project.file)
                        .then(function(res){
                            var project = new Project();
                            console.log(res.data);
                            project.update(project_id, { 'content': res.data });
                        });
                }

                promises.push(promise);
            })(project);
        });

        $q.all(promises).then(function() {
            $scope.refresh();
            console.log('refresh() ok');
        });
    });

【问题讨论】：

使用$q.all 或Promise.all
你检查console.log(results)了吗？对吗？
在循环内发送请求不是个好主意。您的性能会非常低，有时您的应用程序可能会崩溃，这就是为什么您需要在 1 个 http 请求中发送结果（作为数组）

标签： javascript angularjs angular-promise

【解决方案1】：

首先，检查results 是否包含正确的数据——那些为空的console.logs 表明它不是，而projectService.getAll() 没有返回您所期望的。

假设按预期工作，您有三个单独的变量，均名为“project”：

    project.getAll().then(function(results) {
//  ^^^^^^^ 1
        angular.forEach(results, function(project) {
//                                        ^^^^^^^ 2
            project_path = project.path;
//                         ^^^^^^^ 2
//          ...
            $http.get('http://' + project_path + '/' + project_file).then(function(res){
                var project = new Project();
//                  ^^^^^^^ 3

在我的脑海中，老实说，我不知道哪些会覆盖其他哪些，尤其是因为涉及异步代码——但我敢打赌，至少其中一个肯定是。

如果没有其他方法将它们更改为不同的名称将使维护和调试更容易......

【讨论】：

【解决方案2】：

猜测：根据angular.forEach 的工作方式，像这样包装你的回调可能会做到这一点。（否则所有回调都可能使用最新版本的project 调用，更多详细信息请参见JavaScript closure inside loops – simple practical example）

$scope.refreshProject = function () {
  project.getAll().then(function(results) {
    angular.forEach(results, function(project) {
      (function(project) {
        project_path = project.path;
        project_file = project.file;
        project_id = project.id;

        console.log(project);
        console.log('http://' + project_path + '/' + project_file);

        $http.get('http://' + project_path + '/' + project_file)
          .then(function(res){
            var project = new Project();
            project.update(project_id, { 'content': res.data });
          });
      })(project);
    });

    $scope.refresh();
  });
};

【讨论】：