Angular移动成功递归回调服务(Angular move success recursive callback inside service)

Angular移动成功递归回调服务(Angular move success recursive callback inside service)

我有一个返回$ http承诺的服务。 这工作正常，但我需要做一个递归调用，以防列表返回超过100个项目。 再次，这工作正常，但我正在为每个控制器重复自己。 我无法将递归卸载到服务并仍然得到最终结果。 也许$q可以帮忙吗？

// service function List ($http) { var headers = {'Accept': 'application/json;odata=verbose'} , listService = { getByName: function (listName) { return $http({ method: 'GET' , url: '/_api/web/lists/getByTitle(\'' + listName + '\')/items' , headers: headers }); } , getByUrl: function (url) { return $http({ method: 'GET' , url: url , headers: headers }) } }; return listService; } // controller function Calendar ($scope, List) { $scope.events = []; List.getByName('Calendar').success(function (response) { $scope.events = response.d.results; if (response.d.__next) { List.getByUrl(response.d.__next).success(recursiveSuccess); } }); function recursiveSuccess (response) { $scope.events = $scope.events.concat(response.d.results); if (response.d.__next) { List.getByUrl(response.d.__next).success(recursiveSuccess); } } }

I have a service that returns $http promises. This works fine, but I need to do a recursive call in case the list returns more than 100 items. Again, this works okay but I'm repeating myself for every controller. I am having trouble offloading the recursion to the service and still getting the end result. Maybe $q could help?

// service function List ($http) { var headers = {'Accept': 'application/json;odata=verbose'} , listService = { getByName: function (listName) { return $http({ method: 'GET' , url: '/_api/web/lists/getByTitle(\'' + listName + '\')/items' , headers: headers }); } , getByUrl: function (url) { return $http({ method: 'GET' , url: url , headers: headers }) } }; return listService; } // controller function Calendar ($scope, List) { $scope.events = []; List.getByName('Calendar').success(function (response) { $scope.events = response.d.results; if (response.d.__next) { List.getByUrl(response.d.__next).success(recursiveSuccess); } }); function recursiveSuccess (response) { $scope.events = $scope.events.concat(response.d.results); if (response.d.__next) { List.getByUrl(response.d.__next).success(recursiveSuccess); } } }

最满意答案

由于每次调用都会为您提供下一个端点的URL，因此必须在连续的HTTP调用中完成。 在承诺方面，它将在概念上如此完成：

return firstCall.then(function(data){ return secondCall(data); }) // another .then // another .then .then(function(data){ return lastCall(data); });

这里的每个NCall都是一个函数，它接收先前调用的数据并返回下一个聚合数据的promise，而lastCall返回最终的聚合数据。

如果要将其转换为递归函数，它将如下所示：

function getItemsFrom(url, items){ return $http.get(url).then(function(response){ items = items.concat(response.data.items); if (response.data.next){ return getItemsFrom(response.data.next, items); } else { return items; } }); }

数据是：

{ "next": "url/to/data2.json", "items": [1, 2, 3] }

唯一剩下的就是最初的电话：

.factory("fooSvc", function($http){ function getItemsFrom(url, items){ // as above } return { getItems: function(){ return getItemsFrom("url/to/data1.json", []); } }; });

演示

Since each call gives you the next endpoint's URL, this must be done in successive HTTP calls. In terms of promises, it would be conceptually done like so:

return firstCall.then(function(data){ return secondCall(data); }) // another .then // another .then .then(function(data){ return lastCall(data); });

Each NCall here is a function that takes the previous call's data and returns a promise for the next aggregated data, and lastCall returns the final aggregated data.

If were to convert it into a recursive function, it would look like something below:

function getItemsFrom(url, items){ return $http.get(url).then(function(response){ items = items.concat(response.data.items); if (response.data.next){ return getItemsFrom(response.data.next, items); } else { return items; } }); }

with the data being:

{ "next": "url/to/data2.json", "items": [1, 2, 3] }

The only thing remaining is the initial call:

.factory("fooSvc", function($http){ function getItemsFrom(url, items){ // as above } return { getItems: function(){ return getItemsFrom("url/to/data1.json", []); } }; });

Demo