Getting parallel async/await to work javascript [duplicate]

Question

This question already has answers here:

Call async/await functions in parallel (12 answers)

Closed 5 years ago.

I'm trying to run two async operations that don't rely on each other in parallel but I can't seem to get it working.

const activity = fetchActivity(...)
const progress = fetchProgress(...)
await activity
await progress

When I print the properties of activity and progress, they're all undefined.

When I run it like this, the properties show up.

const activity = await fetchActivity(...)
const progress = await fetchProgress(...)

I'm thinking somehow the parallel method awaits aren't awaiting properly as when I log the objects to the console, they eventually show up but directly logging the properties don't work out.

UPDATE:

---

So apparently I can't answer my own question because it was closed but would first like to thank those that directed me to a right answer, albeit not answering my question.

While the actual solution to my problem is given below, the reason not to use this method is given here: Waiting for more than one concurrent await operation, and I should instead pursue the solution that have been mentioned everywhere already.

ANSWER:

---

The value of the awaits is not stored in a variable so directly accessing it afterward doesn't work out.

const activity = fetchActivity(...)
const progress = fetchProgress(...)
const activityData = await activity
const progressData = await progress

• GrafiCode: Does this answer your question? Call async/await functions in parallel
• Zohaib Ijaz: @GrafiCode that's something else
• GrafiCode: @ZohaibIjaz what is it then?
• poroia: This was a method that was suggested by various articles online: I can't find a good one atm but this article, freecodecamp.org/news/… mentioned a little bit about it. ctrl+f "await pizzaPromise"
• poroia: @GrafiCode I think that would work out, but what's wrong with this method? also what if fetchProgress took 20 years and I wanted to run some operations between await activity and await progress

Answer 1

Your method return a Promise.

A Promiseis an defered object that is mainly used to help dealing with async operations.
This is needed since JS is single threaded env. and you don't want to block the main execution thread or long async operations.

const promise1 = fetchActivity(...); // Will return a promise.

You can either use Promise.then to run callbacks when the Promise object is resolved or use async/await instead.

If you choose to await a Promise , it will actually wait till you pass to the next line, even though the action is async (e.g. the thread is not blocked, but the coding feels sync).

If you don't want to wait till for a result, you will probally prefer using Promise.then.

const res1 = await promise1; 
const nextLine = 1+1; // will happen after the promise is resolved

or

promise1.then(res1 => // register callback and do something with the response).
const nextLine = 1+1; // will happen immediately 

Now after you understand what a Promise is, you can use the Promise.all method for parallel execution.

Promise.all accepts an array of promises and returns a promise that will be resolved when all other promises are resolved.

const fetchActivityPromise = fetchActivity(..)
const fetchProgressPromise = fetchProgress(..)
const promiseRes = Promise.all([fetchActivityPromise, fetchProgressPromise]);
promiseRes.then(r => ...)
console.log('here before the promiseRes.then was called');

Answer 2

You can instead use Promise.all():

For example:

await Promise.all([call1(), call2()]);

And you can store the results this way:

let [res1, res2] = await Promise.all([call1(), call2()]);

Hope it will help you !

• poroia: It does work but is there a way to make what was mentioned in the question work? Suppose fetchProgress took 20 years and I wanted to run some operations between await activity and await progress