How to chain multiple http calls in Angular

Question

I use several external database sto get the data I need to create the record I want in my database. I have an application where users can search and add a movie to their watchlist.

For this I need the following data,

1. The movie data such as title, release date, and id.
2. The imdb rating.
3. The movie credits such as actors and directors.

This is how I do it now,

movieAdd.add(movie.id).then(function(response){
  $scope.movieListID = response;

  movieAdd.imdbRating($scope.movieListID.imdb_id).then(function(response){
    $scope.movieImdbRating = response;

    movieAdd.crew(movie.id).then(function(response){
      $scope.movieCredits = response

      return createMovie.create({
        id:             $scope.movieListID.id,
        imdb_rating:    $scope.movieImdbRating.imdbRating,
        title:          $scope.movieListID.original_title,
        image:          $scope.movieListID.poster_path,
        movie_id:       $scope.movieListID.id,
        backdrop:       $scope.movieListID.backdrop_path,
        overview:       $scope.movieCredits.overview
      })

    })
  })
})

I call a service, return the store the response in a scope so I can use it later on, and so on.

Is this the correct way of doing this, or is there a better way?

Answer 1

When chaining promises you can just return a promise instead of nesting them like so:

movieAdd.add(movie.id).then(function(response){
    $scope.movieListID = response;
    return movieAdd.imdbRating($scope.movieListID.imdb_id);
}).then(function(response){
    $scope.movieImdbRating = response;
    return movieAdd.crew(movie.id)
}).then(function(response){
  $scope.movieCredits = response

  return createMovie.create({
    id:             $scope.movieListID.id,
    imdb_rating:    $scope.movieImdbRating.imdbRating,
    title:          $scope.movieListID.original_title,
    image:          $scope.movieListID.poster_path,
    movie_id:       $scope.movieListID.id,
    backdrop:       $scope.movieListID.backdrop_path,
    overview:       $scope.movieCredits.overview
  });
})

this helps keeping your code flatten and clean

Answer 2

It depends how you want to use the information. If you are only going to use it within that scope then use this would do to do it simply.

Typically from habit I would store requested information using LocalStorage as JSON and access it from there.

It depends on the scenario however..

Answer 3

try use

$q.all

for promise chain

look at the below example:

> http://jsfiddle.net/ThomasBurleson/QqKuk/