Forced sequential requests with AngularJS

Question

I am struggling with understanding how to do forced sequential requests with AngularJS 1.5.7.

Right now I am refactoring some code that insert a new user into a specific position on a list of users to handle insertions of multiple users.

I have tried to shorten the code so it becomes more clear where the problem is.

These is the original logic:

The code sends a request to my API server that handles the correct insertion and then the list is refreshed in the front-end:

var users = [
    {id: "1", name: "Jack", order: "0"},
    {id: "2", name: "Jill", order: "1"},
    {id: "3", name: "john", order: "2"}
];

var person = {id: "4", name: "Erik", order: "0"};

UserProvider.update(person.id, {
    order: person.order
}).then(function () {
    return refreshUserList();
});

New user list looks like this:

{id: "4", name: "Erik", order: "0"}
{id: "1", name: "Jack", order: "1"}
{id: "2", name: "Jill", order: "2"}
{id: "3", name: "john", order: "3"}

This i what I am trying to achieve:

Now I am trying to insert multiple users in sequential order like this:

// The list of persons are dynamic depending on the webmasters actins in the front-end
var persons = [
    {id: "4", name: "Erik", order: "0"},
    {id: "5", name: "Ellen", order: "1"},
    {id: "6", name: "Esther", order: "2"}
];

_.forEach(persons, function (person, index) {
    UserProvider.update(person.id, {
        order: person.order
    }).then(function () {
        return refreshUserList();
    });
});

This is what I expect to happen:

{id: "4", name: "Erik", order: "0"}
{id: "5", name: "Ellen", order: "1"}
{id: "6", name: "Esther", order: "2"}
{id: "1", name: "Jack", order: "3"}
{id: "2", name: "Jill", order: "4"}
{id: "3", name: "john", order: "5"}

But since each UserProvider request is asynchronously I cannot be guaranted that each request will be done in the order I want so the API can insert each user one at the time. How do i solve this?

Check this out: https://stackoverflow.com/questions/24586110/resolve-promises-one-after-another-i-e-in-sequence — Frank Modica, Dec 07 '18 at 16:15

georgeawg · Accepted Answer · 2018-12-07T17:29:38.800

To execute promises sequentially, chain from the previous promise:

var persons = [
    {id: "4", name: "Erik", order: "0"},
    {id: "5", name: "Ellen", order: "1"},
    {id: "6", name: "Esther", order: "2"}
];

function sequentialPromise (persons) {
    var promise = $q.when();

    persons.forEach(function (person) {
        promise = promise.then(function() {
            return UserProvider.update(person.id, {
                order: person.order
            });
        });
    });

    return promise;
}

The code creates an initial empty promise and then sequentially chains from that initial promise.

With the AngularJS framework, it is important to use $q Service promises as they are integrated with the AngularJS execution context. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

Avoid using ES6 promises and async/await as they are not integrated with the AngularJS execution context.

Forced sequential requests with AngularJS

1 Answers1