Synchronous and asynchronous call in angularJS with promise and deferral

Question

I created the following controller with 2 service calls with services. The second answer comes before first. I want to make it as if I need the first answer first and second second. but I just got stuck in asynchronous mode and synchronization, help me solve.

The second call depends on the first call. For example, if the first call returns 10 records, then I have to call the second web service 10, using the time from the first answer. therefore I use a loop, but this is wrong.

controller

var mycompaigndata = [];

asyncService.loadDataFromUrls($http.get(WSURL + 'api/first/', 
{
    headers: 
    {
        "Authorization":'Bearer <my-token>'
    }
}))
.then(function(data)
{
    console.log(data);
});


asyncService.loadDataFromUrls($http.get(WSURL + 'api/second', 
{
    headers:
    {
        "Authorization":'Bearer <my-token>'
    }
}))
.then(function(data)
{   
    console.log(data);
});

Service

app.service('asyncService', function($http, $q) 
{
    return {
        loadDataFromUrls: function(url) 
        {
            var deferred = $q.defer();
            var urlCalls = [];

            urlCalls.push(url);

            $q.all(urlCalls)
            .then(
            function(results) 
            {
                deferred.resolve(results) 
            },
            function(errors) 
            {
                deferred.reject(errors);
            },
            function(updates) 
            {
                deferred.update(updates);
            });
            return deferred.promise;
        }
    };
});

Answer 1

, , then . "" , $q.all.

asyncService.loadDataFromUrls('api/first/')
.then(function(firstData) {
    //assuming firstData is an array of 'x' items, do a call for each of these items:
    console.log('results of first call holds ' + firstData.length + ' items');
    var promises = [];
    for(var i = 0; i<firstData.length; i++){
        var id = firstData[i].id;//you can use this to pass to the second call
        promises.push(asyncService.loadDataFromUrls('api/second'));
    }
    return $q.all(promises);
})
.then(function(results) {
  //'results' is an array of results, the nth item holds the result of the 'nth' call to loadDataFromUrls
  for(var i = 0; i<results.length; i++){
    console.log('result nr. ' + i + ' :' + results[i])
  }
});

return $q.all(promises), .

. " " (. ) :

app.service('asyncService', function($http, $q) 
{
    return {
        loadDataFromUrls: function(url) 
        {
            return $http.get(WSURL + url, {
                headers: {
                  "Authorization": 'Bearer <my-token>'
                }
            }).then(function(response){ return response.data; });
        }
    };
});

Answer 2

:

 var mycompaigndata = [];

asyncService.loadDataFromUrls($http.get(WSURL + 'api/first/', 
{
   headers: 
   {
    "Authorization":'Bearer <my-token>'
   }
 }))
.then(function(data)
{
    asyncService.loadDataFromUrls($http.get(WSURL + 'api/second', 
         {
           headers:
         {
         "Authorization":'Bearer <my-token>'
          }
        }))
        .then(function(data)
        {   
         console.log(data);
    });
});

Answer 3

asyncService .

, promises $q.all:

function queryApi(subUrl) {
    return $http.get(WSURL + subUrl, {
        headers: {
            "Authorization":'Bearer <my-token>'
        }
    }).then(function (result) { return result.data; });
}

queryApi('api/first/')
    .then(function (data) { 
        return $q.all(data.map(function (entry) {
            return queryApi('api/second/' + entry.id);
        }));
    })
    .then(function (results) {
         console.log(results);
    });

Answer 4

I think the best answer is to use a loop because you need to repeat the answer to get the identifier.

asyncService.loadDataFromUrls(WSURL + 'api/first/')
    .then(function(data) {
         //iterate to get the id
           //call service again
            asyncService.loadDataFromUrls(WSURL + 'api/first/')
                .then(function(data) {
                     //code here
                });
     });

Service

app.service('asyncService', function($http, $q) {
    return {
         loadDataFromUrls: function(url) {
              return $http.get(url, {
                  "Authorization":'Bearer <my-token>'  
              });
         }
    };
});