Comparing Vue JS Promise Execution in Sequential and Parallel fashion

Question

Comparing Vue JS Promise Execution in Sequential and Parallel fashion

In my VueJS code, I have a working block that needs to be executed sequentially:

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

Currently, it appears that this block runs in parallel. As a result, when I insert records into a database within the initiateTest() function, the ordering becomes random instead of following the order of testRuns, which is what I want to maintain.

I've noticed that the AJAX calls within the initiateTest() function are being made randomly due to the parallel execution.

javascript ajax promise vue.js

Answer 1

Answer №1

If you are looking to fetch the outcomes of self.initiateTest(testRun) in a promise similar to how your code handles Promise.all, you can achieve this by using the array reduce function as shown below:

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
);

Please note: if you are using arrow functions, consider changing self.initiateTest to this.initiateTest. The context of self in your code is not clearly defined.

The resulting promise will resolve with an array containing the resolved outcomes from self.initiateTest(testRun)

For those not using ES2015+, here is an alternative version of the code:

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([]));

Answer 2

If you are looking to fetch the outcomes of self.initiateTest(testRun) in a promise similar to how your code handles Promise.all, you can achieve this by using the array reduce function as shown below:

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
);

Please note: if you are using arrow functions, consider changing self.initiateTest to this.initiateTest. The context of self in your code is not clearly defined.

The resulting promise will resolve with an array containing the resolved outcomes from self.initiateTest(testRun)

For those not using ES2015+, here is an alternative version of the code:

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([]));

Answer 3

Answer №2

If you want the tests to run one after another in sequence, make sure to call the initiateTest function once the previous test has finished.

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

This piece of code initiates a promise that resolves immediately. Each test run is tied to the promise's then handler so they execute only after the preceding promise is resolved.

To make it more concise, you can utilize the reduce method:

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

Answer 4

If you want the tests to run one after another in sequence, make sure to call the initiateTest function once the previous test has finished.

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

This piece of code initiates a promise that resolves immediately. Each test run is tied to the promise's then handler so they execute only after the preceding promise is resolved.

To make it more concise, you can utilize the reduce method:

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

Comparing Vue JS Promise Execution in Sequential and Parallel fashion

Answer №1

Answer №2

Similar questions

a user-friendly database solution for storing data in HTML 5 and Google Drive

JavaScript library jQuery is unable to locate the element tagged as "<."

Implementing a Like Feature in Django

Encountering an issue with WebRTC where the 'addIceCandidate' function on RTCPeerConnection is failing, resulting in an error displayed on the console. However, despite this error

Ensuring that a $(function() is consistently executed and does not diminish over time

When transitioning between forms, I encounter empty values

Tips for incorporating if-else statements into your code

Error encountered while fetching files from Google Cloud bucket using Firebase functions: RangeError - Maximum call stack size exceeded

Unraveling JSON syntax appears to be an ins

Is my configuration file causing Express to serve up index.html instead of my Webpack bundle?

Visualizing data from an array within a different Vue component: A step-by-step guide

Testing a subordinate function within the main method that involves HTTP request authorization

What is the reason for $http.get not requiring a return value?

What is the process through which React form elements receive the event parameter?

Bidirectional updates in AngularJS with CSS styling

I'm wondering if it's possible to fork an npm library in package.json and automatically trigger its build process upon installation

Javascript - Incorporate a hyperlink into my Flickr Api image query

Guide to implementing AJAX for Google Maps with PhoneGap or Cordova

Select two images and simultaneously move them around on a webpage

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method