Dealing with nested promises: strategies for success

Question

Dealing with nested promises: strategies for success

As someone who is new to the concept of promises and how they work, I have been trying to understand how to create and implement them in my code. Although I have read documentation on the topic and grasp the idea behind a promise, I am struggling with actually using them in my code.

Here is a simplified version of my code:

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 functions are asynchronous. My goal is to be able to do this:

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

I understand that the .then() function is used as a promise handler. However, as it currently stands, my code only returns the promise of the query from $cordovaSQLite. I want the promise of $http to be returned as well. This is where I encounter the error:

TypeError: Cannot read property 'then' of undefined

when calling start_it_all().then().

If anyone could provide guidance on how to achieve this, I would greatly appreciate it.

javascript angularjs ionic-framework promise angular-promise

Answer 1

Answer №1

You do not need to nest those promises, you can simply follow this approach:

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

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

To resolve this issue, 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
    });
}

Now, based on the 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 @LenilsondeCastro pointed out - in angular, you can use $q.when instead of Promise.resolve

Answer 2

You do not need to nest those promises, you can simply follow this approach:

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

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

To resolve this issue, 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
    });
}

Now, based on the 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 @LenilsondeCastro pointed out - in angular, you can use $q.when instead of Promise.resolve

Answer 3

Answer №2

Ensure that you return the promise at each level of the chain, and return the data at the deepest level. So your code should look like this:

    return $http.get('foo.php').then(function(){
        // Fetching data here
        return data;
    });

Note: the above was written before the addition of the return.

In the main call, if you need to access the data, include it as an argument:

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

Dealing with Errors

You mentioned receiving the execute promise in a comment, which could suggest an error preventing the HTTP request. To ensure all errors are caught, add error handlers:

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(){
        // Fetching data here
        return data;
     }, function(err){
        console.log('error occurred in HTTP request', err);
     });
 }

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

Answer 4

Ensure that you return the promise at each level of the chain, and return the data at the deepest level. So your code should look like this:

    return $http.get('foo.php').then(function(){
        // Fetching data here
        return data;
    });

Note: the above was written before the addition of the return.

In the main call, if you need to access the data, include it as an argument:

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

Dealing with Errors

You mentioned receiving the execute promise in a comment, which could suggest an error preventing the HTTP request. To ensure all errors are caught, add error handlers:

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(){
        // Fetching data here
        return data;
     }, function(err){
        console.log('error occurred in HTTP request', err);
     });
 }

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

Dealing with nested promises: strategies for success

Answer №1

Answer №2

Dealing with Errors

Similar questions

<head> Javascript codes are failing to run

Loading a page with an Ajax form submission

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

Ajax Syntax Error: Unexpected Token U

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Can you explain the error message "a.split is not a function" in an Angular context?

Unable to determine state1 within the context of state2

Developing cross-platform code using AngularJS

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

Utilizing Vue Router to leverage specific getters from Vuex

What is the most effective method for displaying two external web pages next to each other?

Unable to reach the sub-component of the JSON object that was returned

javascript - audio is not working on the web

Building a Modular Socket.io System using Express 4

Internet Explorer causing trouble with reliable Ajax dropdown selection

header width not meeting 100% requirement

Displaying Bootstrap Alert for a single occurrence

The formcontrol for Reactive Forms is displaying the selected option as "Object object"

Is there a way to cycle through an array with each click?