如何处理嵌套的诺言？

Question

I'm fairly new to the promises concept, at least at creating them. I've read documentation how they work and I get how a promise works. I also understand how you can trigger some callback when all promises are done, I just don't get it how to implement it in my code.

My code simplefied:

function start_it_all(){
    return $cordovaSQLite.execute(db, "SELECT foo FROM bar").then(function(result) {
        return anotherFunction();
    });
}
function anotherFunction(){
     return $http.get('foo.php').then(function(){
        // Here I get some data
     });
 }

Both the $cordovaSQLite and the $http are async. I need to be able to do this:

start_it_all().then(function(){
   // Hide Loading animation (no further return data needed).
});

I understand that the .then() are the promise handlers, but as I currently have it, it returns just the promise of the query, I want the $http to give the promise. At this point I get TypeError: Cannot read property 'then' of undefined on the start_it_all().then()

Can anyone explain how to do that?

Answer 1

You don't have to nest those promises, you can do the following:

function start_it_all(){
    return $cordovaSQLite.execute(db, "SELECT foo FROM bar")
    .then(function(result) {
        return $http.get('foo.php');
    })
    .then(function(){
            // Here I get some data
    });
}

Based on the comments in the original question, the .then method of $cordovaSQLite.execute seems not to be Promise/A+ compliant

to fix this, wrap $cordovaSQLite.execute(...) in Promise.resolve

function start_it_all(){
    return Promise.resolve($cordovaSQLite.execute(db, "SELECT foo FROM bar"))
    .then(function(result) {
        return $http.get('foo.php');
    })
    .then(function(){
            // Here I get some data
    });
}

and, now, based on comment and edited question

function start_it_all(){
    return Promise.resolve($cordovaSQLite.execute(db, "SELECT foo FROM bar"))
    .then(anotherFunction)
    .then(function(){
            // Here I get some data
    });
}

As pointed out by @LenilsondeCastro - in angular you can use $q.when above where I've used Promise.resolve

Answer 2

Make sure you return the promise at every level of the chain, and to return the data at the deepest level. So write:

    return $http.get('foo.php').then(function(){
        // Here I get some data
        return data;
    });

Edit: the above was written before you modified your question and added the return .

Then in the main call, you'd probably want to have access to the data, so add the argument:

start_it_all().then(function(data){
   // Hide Loading animation.
});

Error handling

In comments you indicated you got the execute promise back, ... this might indicate an error preventing the HTTP request from being made.

To be sure you are not running an undetected error condition, add the error handlers as well:

function start_it_all(){
    return $cordovaSQLite.execute(db, "SELECT foo FROM bar").then(function(result) {
        return anotherFunction();
    }, function(err) {
        console.log('error in SQL query', err);
    });
}
function anotherFunction(){
     return $http.get('foo.php').then(function(){
        // Here I get some data
        return data;
     }, function(err){
        console.log('error occurred in HTTP request', err);
     });
 }

start_it_all().then(function(){
    // ...
});