AngularJs: return a promise of nested $http - solution already found but why does it work? [duplicate]

Question

I want to build a nested $http.get, after the first succeed, then request the second.

then i came out with something like this:

$http.get('/xxx').then(function(response){
    $http.get('/yyy').then(function(response){
        //do something
    })
});

But i want to return a Promise after all, so that i can organise my code properly. Obviously the code above doesn't meet my need.

Then i did a lot research with $q.all(), but actually with $q.all, the second request doesn't wait for the first, it will send second request even if the first request doesn't successfully response.

After that i found a solution, which works like a charm in my case:

var promise = $http.get('/xxx').then(function(response1){
    return $http.get('/yyy').then(function(response2) {
        return response2.data;
    });;
});     
return promise;

But i don't understand why would it work???

In the success function of first promise($http.get), it returns the second promise as the parameter of the function for then().

but if i call

promise.then(function(data){
    console.log(data);
});

i found the data printed here is response2.data, how could it be possible? Shouldn't it be the Promise Object of the second $http???

Answer 1

When you return a promise from a promise .then(…) callback, the promise library will automatically wait for the inner promise to resolve, and will then resolve the returned promise with that value.

In other words, if you make a promise of a promise, you will get its inner value back.

This is part of the beauty of promises; you can reduce nesting by taking advantage of this feature and chaining your promises:

var promise = $http.get('/xxx').then(function(response1) {
    return $http.get('/yyy');
}).then(function(response2) {
    return response2.data;
});

For more details, see my blog.