How to use sync within an async Promise in JavaScript?

Question

When I run the following code:

b = async attempt => {
  if (attempt == 5) {
    return;
  }
  console.log("Starting attempt:", attempt);
  b(attempt + 1).then(() => {
    console.log("Finished attempt:", attempt);
  });
};
b(0);

The output is:

Starting attempt: 0
Starting attempt: 1
Starting attempt: 2
Starting attempt: 3
Starting attempt: 4
Finished attempt: 4
Finished attempt: 3
Finished attempt: 2
Finished attempt: 1
Finished attempt: 0

However, I want to call another promise a before each recursive call as follows:

a = Promise.resolve();
b = async attempt => {
  if (attempt == 5) {
    return;
  }
  console.log("Starting attempt:", attempt);
  a.then(() => {
    b(attempt + 1);
  }).then(() => {
    console.log("Finished attempt:", attempt);
  });
};
b(0);

Now the output is:

Starting attempt: 0
Starting attempt: 1
Starting attempt: 2
Finished attempt: 0
Starting attempt: 3
Finished attempt: 1
Starting attempt: 4
Finished attempt: 2
Finished attempt: 3
Finished attempt: 4

How can I modify the second code block to ensure that the output is the same as the first code block?

Why did you use an `async` function when not using `await`? – Bergi Feb 03 '19 at 20:00 — Bergi, Feb 03 '19 at 20:00

Dacre Denny · Answer 1 · 2019-02-03T20:29:01.727

If I understand your question correctly, then the issue is cause by nested promises and calls to asynchronous functions (ie b(attempt + 1)) not blocking execution of the enclosing function. This in turn produces unordered, and unexpected logging results.

Consider revising the call to b(), by return the promise of b(attempt + 1); to ensure that the following log: console.log("Finished attempt:", attempt) is executed after completion of b() completes:

const a = Promise.resolve();
const b = async attempt => {
  if (attempt == 5) {
    return;
  }
  console.log("Starting attempt:", attempt);
  
  await a.then(() => {
  
    /* 
    Return the project of b() here, has similar effect
    to that of await keyword
    */
    return b(attempt + 1); 
  }).then(() => {
    console.log("Finished attempt:", attempt);
  });
};

b(0);

Avoid [`await`ing a `.then(…)` chain](https://stackoverflow.com/a/54387912/1048572)! — Bergi, Feb 03 '19 at 19:59

score 0 · Accepted Answer · answered Feb 03 '19 at 19:47

You are breaking the promise chain by not returning an inner promise a.then(() => {b(attempt + 1);}). Adding return statement should help.

Also I would recommend not to mix async/await syntax with .then and callbacks.

The following code looks more "synchronous" and does the trick.

const a = Promise.resolve();
const b = async attempt => {
  if (attempt == 5) {
    return;
  }
  console.log("Starting attempt:", attempt);
  
  await a
  
  await b(attempt + 1)
  
  console.log(`Finished attempt: ${attempt}`)
};

b(0);

score 0 · Answer 3 · answered Feb 03 '19 at 20:04

You forgot to return the promise chains that you are creating:

const b = attempt => {
  if (attempt == 5) {
    return Promise.resolve();
  }
  console.log("Starting attempt:", attempt);
  const a = Promise.resolve();
  return a.then(() => {
//^^^^^^
    return b(attempt + 1);
//  ^^^^^^
  }).then(() => {
    console.log("Finished attempt:", attempt);
  });
};
b(0).then(() => {
  console.log("done");
});

Only with those returns, the caller of the function will be able to wait for the promise. Your first snippet has the same issue. It would've been more obvious if you had omitted the async keyword, so that it was clear that b() didn't return a promise.

If you want to use async/await, your code should look like this:

const b = async attempt => {
  if (attempt == 5) {
    return;
  }
  console.log("Starting attempt:", attempt);
  await Promise.resolve();
//^^^^^
  await b(attempt + 1);
//^^^^^
  console.log("Finished attempt:", attempt);
};
b(0).then(() => {
  console.log("done");
});

How to use sync within an async Promise in JavaScript?

3 Answers3