DEV Community

Discussion on: Understanding JavaScript async/await in 7 seconds

madslundt profile image
Mads • Edited on

How do you implement the following with async/await:

getProfile( => { this.profile = data; });

getComments( => { this.comments = data; });

getFriends( => { this.friends = data; });

Be aware that I can't use Promise.all because that would wait for all promises and require that all promises are resolved successfully.
What I want is to set the variables when a promise finishes and not wait for the others.

frenkix profile image
Goran Jakovljevic • Edited on

It should be in async function, then call it just like:

this.profile = await getProfile(;
this.comments = await getComments(;
this.friends = await getFriends(;

madslundt profile image
Mads • Edited on

The problem with this approach is that getProfile is blocking getComments and getFriends. Once getProfile is resolved successfully, getComments runs and blocking getFriends. When getComments is resolved successfully, getFriends finally runs.

That is not the same thing as running them parallel. That is more like the following:

getProfile( => {
  this.profile = profileData;
  getComments( => {
    this.comments = commentsData;
    getFriends( => {
      this.friends = friendsData;
Thread Thread
frenkix profile image
Goran Jakovljevic • Edited on

Ah sorry, I didn't read it correctly.

Yeah, promise.all wont resolve with a single reject, so what I would do is return an error as a normal result instead of rejecting, and then filter out errors after promises finish. Until they make something like .every available for .all as well.

And while it might be strange to have errors passing into resolve, as long as your code is expecting them, I see nothing wrong in it.

Thread Thread
wassimchegham profile image
Wassim Chegham Author • Edited on

Hey, so for your particular use case, I would try this:

const profilePromise = getProfile(;
const commentsPromise = getComments(
const friendsPromise = getFriends(;

this.profile = await profilePromise;
this.comments = await commentsPromise;
this.friends = await friendsPromise;

Here is a working proof of concept:

const func = (t, f) => new Promise( (res, rej) => { setTimeout( () => res(f()), t )  } )
const a = func(2000, () => console.log('func 1'));
const b = func(0, () => console.log('func 2'));
const c = func(0, () => console.log('func 3'));
const [f1, f2, f3] = [await a, await b, await c];

console.log(f1, f2, f3);

Thread Thread
madslundt profile image

To run them parallel there is this approach:

const result = await Promise.all([

However, this waits for all to finish and does not replace the first I descried, as I see it?

As I see it the only way to avoid this with async/await is to wrap the promises into their own function and run it in Promise.all. Like this (haven't tested this yet):

await Promise.all([
  async () => { this.profile = await getProfile(id); },
  async () => { this.comments = await getComments(id); },
  async () => { this.friends = await getFriends(id); },
Thread Thread
prasannasridharan profile image

As I see it, in both cases the inner methods run async and the end promise is awaited so it would not be blocking the current thread anyway.
When I get time, will execute 2nd e.g. but highly doubt if it has any difference in behavior compared to 1st.

nirmalpatel59 profile image
(async () => {
   this.profile = await getProfile(;
   this.comments = await getProfile(;
   this.friends = await getProfile(;