无法理解AngularJS Promises

Question

I'm currently learning AngularJS and I'm having trouble translating a piece of code from an example to my own code.

In the following example from Urish , I understand that the variable promise must contain the functions and queries necessary for the rest of the function to execute.

var promise = asyncFunction(parameters); 

promise.then( 
function (result) { 
 // Do Something with the result 
}, 
function (error) { 
 // Handle error (exception, etc). 
}); 

So in my case, if I want to first make two $http queries and with the data received populate the url of a third query, would it be something like this?

var promise = $scope.getDetails(id); 

  $scope.getDetails = function (id) {
    $http.get('http://api.discogs.com/artists/' + id).
      success(function(data) {
          $scope.artist = data;
      });
    $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=100').
      success(function(data2) {
          $scope.releases = data2.releases;
      });
    $scope.clicked = true;
    $scope.sliding = true;
  } 

  promise.then( 
    $scope.getImages = function (title, name) {
        $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
          success(function(data4) {
              $scope.images = data4;
          });
    },
  function (error) { 
   // Handle error (exception, etc). 
  }); 

Is this the right approach? Am I missing something?

EDIT : I've created a working Plunker with Benjamins solution, but the AngularJS brakes. Any idea where the issue might be?

Answer 1

In order to combine promises, like Florian suggested you should use .all :

$scope.getDetails = function (id) {
    var api = 'http://api.discogs.com/artists/';
    return $q.all([$http.get(api + id),
                  $http.get(api + id + '/releases?page=1&per_page=100')]);
});

Then usage is:

$scope.getDetails(YOURID).then(function(results){
    $scope.artist = results[0];
    $scope.releases = results[1].releases;
});

Or in the three queries example:

$scope.getDetails(YOURID).then(function(results){
    $scope.artist = results[0];
    $scope.releases = results[1].releases;
    // data for getImages available here
    return $http.get('http://ws.audioscrobbler.com/2.0/?...' + results[0]...
});

(Also, I'd put it in a service)

Answer 2

  $scope.getDetails = function (id) {
    $scope.clicked = true;
    $scope.sliding = true;
return $q.all(    $http.get('http://api.discogs.com/artists/' + id).
      success(function(data) {
          $scope.artist = data;
      }),
    $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=100').
      success(function(data2) {
          $scope.releases = data2.releases;
      }));
}

You must accept $q as a dependency for the controller. $q.all() takes multiple promises and returns a promise which resolves or gets rejected depending upon the passed in promises. Read about $q at http://docs.angularjs.org/api/ng/service/$q You can do

var promise = $scope.getDetails(id);
promise.then(...,...);