Sequencing the loading of resources in AngularJS one after the other by utilizing promises

Question

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

While working in a service, my goal is to load a resource using $http, store it in a variable, load a child resource and store that as well. I understand the concept of promises for this task, but I am struggling with how to properly implement it in my code. Below is my current code snippet:

var project = {};
var todo = {};

function init(){
        var idProject = 21;
        var idTodo = 6;            

        // Check if idProject is provided
        if (idProject != null) {

            // Load project data first
            var promise = WorkspaceManager.getProject($rootScope.workspace, idProject);

            // Save project data after loading
            promise.then(function(response){
                project = response.data;                    
                return project;
            });

            if (idTodo != null) {
                // Then load todo data
                promise.then(function(project){   
                    return ProjectManager.getTodo(project, idTodo);
                });

                // Save todo data after loading
                promise.then(function(response){
                    todo = response.data;                    
                    return todo;
                });
            }       
        }

        console.log(project); // Output: {}
    }

init()

Any insights or guidance would be appreciated!

javascript angularjs promise

Answer 1

Answer №1

To correctly comprehend this scenario, it is evident that the task at hand is more complex than it initially seems. A function is required to synchronize two asynchronous processes and yield a promise containing a combined value from both processes.

There are two potential methods to tackle this:

Simplistic yet inelegant: Store the necessary values as properties of an external object in each asynchronous process.
Sophisticated but cumbersome: Accumulate the desired values as properties of an object within each asynchronous process, with a promise returned for accessing it.

The provided code exemplifies the first approach :

function init() {
    var idProject = 21;
    var idTodo = 6;
    var projectObj = {};//This object serves as a repository for asynchronously acquired data.
    if ( idProject != null ) {
        return WorkspaceManager.getProject($rootScope.workspace, idProject).then(function(response) {
            projectObj.project = response.data;//store `response.data` in the repository as .project.
            if( idTodo != null ) {
                return ProjectManager.getTodo(response.data, idTodo);
            }
        }).then(function(toDo) {
            projectObj.toDo = toDo;//store `toDo` in the repository as .toDo .
            return projectObj;
        });
    }
}

init().then(function(projectObj) {
    console.log(projectObj.project);
    console.log(projectObj.toDo);
});

Alternatively (still following the first approach) with error handlers :

function init() {
    var idProject = 21;
    var idTodo = 6;
    var projectObj = {};//This object serves as a repository for asynchronously acquired data.
    if ( idProject != null ) {
        return WorkspaceManager.getProject($rootScope.workspace, idProject).then(function(response) {
            projectObj.project = response.data;//store `response.data` in the repository as .project.
            if( idTodo != null ) {
                return ProjectManager.getTodo(response.data, idTodo);
            }
            else {
                $q.defer().reject('idTodo invalid');
            }
        }).then(function(toDo) {
            projectObj.toDo = toDo;//store `toDo` in the repository as .toDo .
            return projectObj;
        });
    }
    else {
        return $q.defer().reject('idProject invalid');
    }
}

init().then(function(projectObj) {
    console.log(projectObj.project);
    console.log(projectObj.toDo);
}, function(errorMessage) {
    console.log(errorMessage);
});

untested

Answer 2

To correctly comprehend this scenario, it is evident that the task at hand is more complex than it initially seems. A function is required to synchronize two asynchronous processes and yield a promise containing a combined value from both processes.

There are two potential methods to tackle this:

Simplistic yet inelegant: Store the necessary values as properties of an external object in each asynchronous process.
Sophisticated but cumbersome: Accumulate the desired values as properties of an object within each asynchronous process, with a promise returned for accessing it.

The provided code exemplifies the first approach :

function init() {
    var idProject = 21;
    var idTodo = 6;
    var projectObj = {};//This object serves as a repository for asynchronously acquired data.
    if ( idProject != null ) {
        return WorkspaceManager.getProject($rootScope.workspace, idProject).then(function(response) {
            projectObj.project = response.data;//store `response.data` in the repository as .project.
            if( idTodo != null ) {
                return ProjectManager.getTodo(response.data, idTodo);
            }
        }).then(function(toDo) {
            projectObj.toDo = toDo;//store `toDo` in the repository as .toDo .
            return projectObj;
        });
    }
}

init().then(function(projectObj) {
    console.log(projectObj.project);
    console.log(projectObj.toDo);
});

Alternatively (still following the first approach) with error handlers :

function init() {
    var idProject = 21;
    var idTodo = 6;
    var projectObj = {};//This object serves as a repository for asynchronously acquired data.
    if ( idProject != null ) {
        return WorkspaceManager.getProject($rootScope.workspace, idProject).then(function(response) {
            projectObj.project = response.data;//store `response.data` in the repository as .project.
            if( idTodo != null ) {
                return ProjectManager.getTodo(response.data, idTodo);
            }
            else {
                $q.defer().reject('idTodo invalid');
            }
        }).then(function(toDo) {
            projectObj.toDo = toDo;//store `toDo` in the repository as .toDo .
            return projectObj;
        });
    }
    else {
        return $q.defer().reject('idProject invalid');
    }
}

init().then(function(projectObj) {
    console.log(projectObj.project);
    console.log(projectObj.toDo);
}, function(errorMessage) {
    console.log(errorMessage);
});

untested

Answer 3

Answer №2

You are currently creating a chain of promises based on the initial promise, forming a sequence of "brothers" promises. All these promises will be resolved once the WorkspaceManager.getProject promise is also resolved. It seems like what you actually want is to link them together so that when the first promise is resolved, you request Todo data, and upon receiving it, you proceed to save it. To achieve this, you should capture the resulting promise from each step.

// Save project data first
promise = promise.then(function(response){
  project = response.data;
  return project;
});

// Load todo data next
promise = promise.then(function(project){   
  return ProjectManager.getTodo(project, idTodo);
});

// Save todo data after loading
promise.then(function(response){
  todo = response.data;                    
  return todo;
});

To further clarify, the initial setup can be compared to:

var mainPromise = ...;
mainPromise.then(function loadTodo(mainPromiseReturn){});
mainPromise.then(function saveTodo(mainPromiseReturn){});

In this case, the operations of loading and saving todos run parallelly and independently, without being interconnected. They both operate on the same set of data.

The recommended approach would be more like:

var mainPromise = ...;
mainPromise
  .then(function loadTodo(mainPromiseReturn){})
  .then(function saveTodo(loadTodoReturn){});

Answer 4

You are currently creating a chain of promises based on the initial promise, forming a sequence of "brothers" promises. All these promises will be resolved once the WorkspaceManager.getProject promise is also resolved. It seems like what you actually want is to link them together so that when the first promise is resolved, you request Todo data, and upon receiving it, you proceed to save it. To achieve this, you should capture the resulting promise from each step.

// Save project data first
promise = promise.then(function(response){
  project = response.data;
  return project;
});

// Load todo data next
promise = promise.then(function(project){   
  return ProjectManager.getTodo(project, idTodo);
});

// Save todo data after loading
promise.then(function(response){
  todo = response.data;                    
  return todo;
});

To further clarify, the initial setup can be compared to:

var mainPromise = ...;
mainPromise.then(function loadTodo(mainPromiseReturn){});
mainPromise.then(function saveTodo(mainPromiseReturn){});

In this case, the operations of loading and saving todos run parallelly and independently, without being interconnected. They both operate on the same set of data.

The recommended approach would be more like:

var mainPromise = ...;
mainPromise
  .then(function loadTodo(mainPromiseReturn){})
  .then(function saveTodo(loadTodoReturn){});

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

Answer №1

Answer №2

Similar questions

Is JQuery function running on its own or triggered by an event without manual input?

What is the process for integrating three.js code manually into an iframe?

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Having trouble getting webpack and babel to start using npm

Struggling with establishing recognition of a factory within an Angular controller

Converting a date from PHP to JavaScript

The v-show directive is not activated by a Vuex commit

Numerous slideshows using identical scripts

Using the power of ReactJS, efficiently make an axios request in the

Issues with JQuery Ajax rendering in browser (suspected)

The div swiftly clicks and moves beyond the screen with animated motion

Using Sequelize to Create/Post Data with Many-to-Many Relationship

Is there a way to automatically close the InAppBrowser once certain content is displayed?

What is the best way to deal with a "Access to restricted URI denied" error in JavaScript while utilizing XMLHttpRequest?

The Next.js Image component is not compatible with an external URL as the image source

What is the best way to transform the pages extracted through the Notion API into slugs?

What is the best way to save a jQuery or JavaScript variable into a JSON file?

Watch for changes in a nested collection in Angular using $scope.$watch

Experiencing prolonged delays with PHP/AJAX login process

Is it possible to list bash/sh files as dependencies in package.json?