Vue JS Promise Sequential vs Parallel

Question

I have working code in VueJS however need a certain block to run sequentially:

  return Promise.all(this.vm.multipleActions.run.map(function (testRun) {
    return self.initiateTest(testRun);
  }))

Currently it seems this runs in parallel - so in initiateTest() I insert records into a DB however parallel gets me random ordering instead of the testRuns in order (which I'd like to preserve).

I can observe the AJAX calls in initiateTest() made randomly due to the parallel nature.

Can you udate the question with what you want to be executed before this? — Achala Dissanayake, Aug 31 '17 at 01:07
Possible duplicate of [Resolve promises one after another (i.e. in sequence)?](https://stackoverflow.com/questions/24586110/resolve-promises-one-after-another-i-e-in-sequence) — alexmac, Aug 31 '17 at 07:44

Jaromanda X · Answer 1 · 2017-08-31T01:46:24.973

If you want to return the results of self.initiateTest(testRun) in the returned promise like your code does with Promise.all, you can use array reduce function like so

return this.vm.multipleActions.run.reduce((promise, testRun) =>
    promise.then(results => 
        self.initiateTest(testRun).then(result => {
            results.push(result);
            return results;
        })
    ), Promise.resolve([]) // initial promise to chain to
);

Note: if using arrow functions, the self.initiateTest could possibly be this.initiateTest - though, it's not clear what self is in your code

The returned promise will resolve to an array of (resolved) results returned by self.initiateTest(testRun)

the non ES2015+ version of the above code is

return this.vm.multipleActions.run.reduce(function (promise, testRun) {
    return promise.then(function (results) {
        return self.initiateTest(testRun).then(function (result) {
            results.push(result);
            return results;
        });
    });
}, Promise.resolve([]));

James · Answer 2 · 2017-08-31T01:38:40.123

To get the them to run sequentially, you need to call initiateTest once the previous test has completed.

var promise = Promise.resolve();
this.vm.multipleActions.run.forEach(function (testRun) {
    promise = promise.then(function() {
        return self.initiateTest(testRun);
    });
})
return promise;

This code will create an initial promise that is resolved immediately. Each test run is attached to the promise's then handler, so they only execute once the previous promise has been resolved.

Or to shorten it even further, you can use reduce:

return this.vm.multipleActions.run.reduce(function (promise, testRun) {
    return promise.then(function() {
        return self.initiateTest(testRun);
    });
}, Promise.resolve())

Vue JS Promise Sequential vs Parallel

2 Answers2