Question

我是AngularJS的新手，我正在尝试使用.foreach循环发送http请求。这是我的代码

app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
var webcontent = "";
angular.forEach(rd, function(rd1){
    $http.get(furl1 + rd1.slug,config).then(function(res){          
    webcontent += res.data.title;
    console.log(webcontent);//console 1
    });
});
console.log(webcontent);//console 2
$scope.myWelcome = webcontent;
}, function myError(response) {$scope.myWelcome = response.statusText;});});

我预计控制台2将显示组合的＆＃34; res.data.title＆＃34;但是，它只显示初始值。（在这种情况下为空）。控制台日志1正确显示 - 列出增加的＆＃34; webcontent＆＃34;变量。不确定如何保持＆＃34; webcontent＆＃34; （控制台2）更新值。任何回复将不胜感激！谢谢！

Answer 1

这不是一个角度问题，这是一个异步的javascript问题。您的承诺在您的承诺完成之前完成。您可以使用查询库等待所有要解析的promise，如下所示：

app.controller('myCtrl', function($scope, $http, $q) {
    var rd;
    $http.get(furl, config).then(function mySucces(response) {
        rd = response.data;
        var webcontent = "";
        var promises = [];

        angular.forEach(rd, function(rd1) {
            promises.push($http.get(furl1 + rd1.slug, config);
        });

        $q.all(promises).then(function (results) {
            angular.forEach(results, function (result) {
                webcontent += result.data.title;
            }

            $scope.myWelcome = webcontent;
        });
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

Answer 2

您可以完全删除webcontent变量并直接在其中更新$scope.myWelcome变量，它应该可以正常工作。所以：

app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
$scope.myWelcome = "";
angular.forEach(rd, function(rd1){
    $http.get(furl1 + rd1.slug,config).then(function(res){          
      $scope.myWelcome += res.data.title;
      console.log(webcontent);//console 1
    });
});


}, function myError(response) {$scope.myWelcome = response.statusText;});});

Answer 3

Ajax Calls 始终是异步任务，它们类似于window.setTimeout。按任务编写代码任务是不可能的。看看：

＆＃13;

console.log(1);
window.setTimeout(console.log.bind(console, 2));
console.log(3);

＆＃13;

这是因为异步任务在后续事件循环中执行（将来）。

最后，您的代码段可能是这样的：

＆＃13;

$http
  .get(furl, config)
  .then(function(response) { return response.data; })
  .then(function(resources) {
    return $q.all(resources.map(function(resource) {
      return $http.get(furl1 + resource.slug, config);
    }));
  })
  .then(function(results) {
    return results.map(function(result) {
      return result.data.title;
    }).join('');
  })
  .catch(function(response) {
    return response.statusText;
  })
  .then(function(greetings) {
    $scope.myWelcome = greetings;
  })
;

＆＃13;

无法使用AngularJS

3 个答案: