Question

我正在尝试为每个页面进行服务调用并尝试放入列表。这是我的代码。

loadItems:function(id,pageNo){
    itemsList =[];
    var items =[];
     for (var i = 1; i <=pageNo; i++){
                this.getPages(id,i).then(function(response){
                   items[i] =response.items;                    
                },function(response){
                   // error
                });
    }

    //here Iam trying to put all items in itemsList. here item[1] store all items from page1 say 10 items then item[2] from page2. itemlist is the final list contains all items
    return messageList;    
},
getPages:function(id,pageNo){
 data.payload = {
                id: id,
                page: pageNo,               
            };
            var promise = $http.post( url,data); 
            return promise;
        },
}

如何将所有这些保存在一个列表中。

Answer 1

创建一个promise，在处理完所有网页后resolve（或reject）。解析后，将items数组的结果连接到itemsList

您可以在items数组上使用观察程序来查看它何时变满并解析外部承诺。（然后可能有更优雅的方式来做观看）。

希望这有帮助

干杯

Answer 2

这是我对编码问题的2美分解决方案。显然，只有在http post完成加载页面后才会调用项目列表。

你可以制作自己的虚拟welcome.html而无需HTML代码即。

Hello AngularJS Students

希望这会有所帮助。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

<script>

var url = "welcome.html";

var data = {
    id: 1,
    page: 1               
};

var items = [];
var pageNo = 3;
var flag = true;

function getItems(){
	//alert(items[0]);
	for (var i = 1; i <=pageNo && items[i]!=null; i++){
		alert("Get item: " + i+ " " + items[i]);
	}
	return items;
}

function setItems(response){

//inserted into a list
	for (j = 1; j <=pageNo; j++){
				
		if(items[j]==null){
			items[j]=response.data;
			alert(j+" "+items[j]);
			break;
		}
	}

}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  
  for (i = 1; i <=pageNo; i++){
		data = {     
					id: data.id,
					page: i           
			   };
	  
		$http.post(url, data).then(function (response) {
			$scope.myWelcome = response.data;
			setItems(response);
			
			//Items exist within the http post call.
			getItems();
			
		});
		//
  }
  
  
  
});





</script>

</body>
</html>

Answer 3

保存派生的承诺并使用$q.all

loadItems:function(id,pageNo){
    itemsList =[];
    var items = [];
    var promises = [];
    var self = this;
    for (var i = 1; i <=pageNo; i++){
         //IIFE closure
         (function (i) {
              var derivedPromise =
                  self.getPages(id,i).then(function(response){
                      items[i] = response.data;
                      return response.data;                
                  },function(errorResponse){
                      //error
                      throw errorResponse;
                  });
              promises.push(derivedPromise);
         })(i);
    }
    return $q.all(promises);    
},

$q.all承诺将使用一系列项目，或者在第一次错误响应时被拒绝。

如何使用不同的参数调用相同的函数并将其放在一个列表中

3 个答案: