Managing multiple promises with multiple steps

Question

Managing multiple promises with multiple steps

I am looking to extract information from various sources. Once each dataset is obtained, I want to send it to a separate asynchronous processor such as a worker thread. After all processes are complete, I aim to combine the data and deliver it.

Here is an example:

function multiplyAndSum(a1, a2){
  ret = 0;
  for(var i = 0, l = a1.length; i < l; i++){
    ret += a1[i]*a2[i];
  }
  return ret;
}

function getProcessedData(){
  var worker1 = new Worker('recordProcessor.js');
  var worker2 = new Worker('recordprocessor.js');
  var results = null;
  worker1.onmessage(event=>{
    results=(!results)?event.results:
      multiplyAndSum(event.results, results);
  });
  worker2.onmessage(event=>{
    results=(!results)?event.results:
      multiplyAndSum(event.results, results);
  });
  var ds1 = fetch('./dataSet1.json')
    .then(rep=>resp.json())
    .then(d=>worker1.postMessage({
      'set': 1,
      'data': d
    }));
  var ds2 = fetch('./dataSet2.json')
    .then(rep=>resp.json())
    .then(d=>worker2.postMessage({
      'set': 1,
      'data': d
    }));
  // Once results is populated return results
}

I believe I should encapsulate all of this in another Promise, but I am unsure of the exact approach to take.

javascript asynchronous promise

Answer 1

Answer №1

Here is an alternative approach to solve this problem:

function multiplyAndSum(a1, a2){
  let ret = 0;
  for(let i = 0, l = a1.length; i < l; i++){
    ret += a1[i]*a2[i];
  }
  return ret;
}

function getWorkerMessage(worker) {
    return new Promise((resolve, reject) => {
        worker.onmessage(event => {
            resolve(event);
        });
    });
}

function getProcessedData(){
    const worker1 = new Worker('recordProcessor.js');
    const worker2 = new Worker('recordprocessor.js');

    let p = Promise.all([
        getWorkerMessage(worker1),
        getWorkerMessage(worker2)
    ]).then([a1, a2] => {
        return multiplyAndSum(a1.results, a2.results);
    });

    // start off both workers by sending them their data
    fetch('./dataSet1.json')
      .then(rep=>resp.json())
      .then(d=>worker1.postMessage({'set': 1,'data': d}));
    fetch('./dataSet2.json')
      .then(rep=>resp.json())
      .then(d=>worker2.postMessage({'set': 1,'data': d}));

    return p;
}

// usage
getProcessedData().then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

Here is my interpretation of the task at hand.

Create two workers
Fetch two sets of data and assign one set to each worker
After the workers process the data, multiply the resulting arrays and sum them to obtain a final value
The final value is then returned to the caller

For a cleaner solution, I converted the worker message into a promise that resolves to the final result. Using Promise.all(), I wait for both workers to finish processing. This allows for multiplying and summing the data arrays to get the desired final result.

One potential question remains: Should the workers be cleaned up after use?

Answer 2

Here is an alternative approach to solve this problem:

function multiplyAndSum(a1, a2){
  let ret = 0;
  for(let i = 0, l = a1.length; i < l; i++){
    ret += a1[i]*a2[i];
  }
  return ret;
}

function getWorkerMessage(worker) {
    return new Promise((resolve, reject) => {
        worker.onmessage(event => {
            resolve(event);
        });
    });
}

function getProcessedData(){
    const worker1 = new Worker('recordProcessor.js');
    const worker2 = new Worker('recordprocessor.js');

    let p = Promise.all([
        getWorkerMessage(worker1),
        getWorkerMessage(worker2)
    ]).then([a1, a2] => {
        return multiplyAndSum(a1.results, a2.results);
    });

    // start off both workers by sending them their data
    fetch('./dataSet1.json')
      .then(rep=>resp.json())
      .then(d=>worker1.postMessage({'set': 1,'data': d}));
    fetch('./dataSet2.json')
      .then(rep=>resp.json())
      .then(d=>worker2.postMessage({'set': 1,'data': d}));

    return p;
}

// usage
getProcessedData().then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

Here is my interpretation of the task at hand.

Create two workers
Fetch two sets of data and assign one set to each worker
After the workers process the data, multiply the resulting arrays and sum them to obtain a final value
The final value is then returned to the caller

For a cleaner solution, I converted the worker message into a promise that resolves to the final result. Using Promise.all(), I wait for both workers to finish processing. This allows for multiplying and summing the data arrays to get the desired final result.

One potential question remains: Should the workers be cleaned up after use?

Managing multiple promises with multiple steps

Answer №1

Similar questions

Validation in AngularJS - Setting minimum length for textarea using ng-minlength

Having trouble with implementing a 64-bit bitwise AND operation in JavaScript?

Attempting to grasp the concept of Thennables within the VSCode API. Can these TypeScript code examples be considered equivalent?

Webpack has no issues building the files, however, the JavaScript fails to execute during runtime

Guide to increasing a field value in Backendless.com

Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

Record collection of elements - JavaScript Angular

Display a list of items using ReactJS by mapping through an array of objects and rendering based on

displaying a div as a pop-up within an ASP.NET MVC 4 web application

The final DOM is not loading properly when using Jest and React Testing Library during page initialization

Guide on redirecting to a new domain using a cookie in Express.js

Begin the input box with some text

Utilizing Express.js: A Guide to Fetching File Downloads with a POST Method

Receiving a blank string after calling fs.readFile within the chokidar.watch(path_file).on('change', ...) function

Facing issues when attempting to link two databases using Express

Creating animated direction indicators in the "aroundMe" style with ngCordova

Using regex to confirm prices are accurate

What is the best way to extract the text between the @ symbol and the next space using JavaScript or React?

Since switching to PHP 5.5 from version 3.x, I have noticed that it is attempting to interpret my JavaScript comment within a script tag in a PHP include file

Is there something incorrect with the incrementation in JavaScript?