Question

189

js - How to call an async function within a Promise .then()

rated 0 times [ 195] [ 6] / answers: 1 / hits: 51769 / 5 Years ago, wed, february 27, 2019, 12:00:00

First, I have to mention that I already look through many questions in stackoverflow, but many doesn't answer my question. Not to mention many doesn't even have an answer.

How do I achieve the following, making sure functionB() executes after functionA() finishes?

Note: I do not want to convert my async functions to new Promise(resolve=>{...})

because I'll have to convert the someServiceThatMakesHTTPCall() as well, and any other async functions within the call stack, which is a big change.

  function functionThatCannotHaveAsyncKeyword() {

      functionA()

        .then(async function() {

            await functionB();

        })

        .then(function() {

            console.log('last');

        });

  }



  async function functionA() {

      console.log('first');

      await someServiceThatMakesHTTPCall();

  }



  async function functionB() {

      console.log('second');

      await someServiceThatMakesHTTPCall();

  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingjamieb

Add To Favorites

Follow

Total Points: 743

Total Questions: 113

Total Answers: 128

Location: Suriname

Member since Sun, Jun 13, 2021

3 Years ago

answered 5 Years ago malkajillc · Accepted Answer

Your approach using await in an async then callback will work, but it's unnecessarily complex if all you want to do is call the async function and have its result propagate through the chain. But if you are doing other things and want the syntax benefit of async functions, that's fine. I'll come back to that in a moment.

async functions returns promises, so you just return the result of calling your function:

function functionThatCannotHaveAsyncKeyword() {

    functionA()

        .then(function() {

            return functionB(someArgument);

        })

        .then(function() {

            console.log('last');

        }); // <=== Note: You need a `catch` here, or this function needs

            // to return the promise chain to its caller so its caller can

            // handle errors

}

If you want to pass functionA's resolution value into functionB, you can do it even more directly:

functionA()

    .then(functionB)

    // ...

When you return a promise from a then callback, the promise created by the call to then is resolved to the promise you return: it will wait for that other promise to settle, then settle the same way.

Example:

const wait = (duration, ...args) => new Promise(resolve => {

    setTimeout(resolve, duration, ...args);

});



async function functionA() {

    await wait(500);

    return 42;

}



async function functionB() {

    await wait(200);

    return answer;

}



functionB()

.then(result => {

    console.log(result); // answer

    return functionA();

})

.then(result => {

    console.log(result); // 42

})

.catch(error => {

    // ...handle error...

});

Coming back to your approach using an async then callback: That works too, and makes sense when you're doing more stuff:

const wait = (duration, ...args) => new Promise(resolve => {

   setTimeout(resolve, duration, ...args);

});



async function functionA() {

    await wait(500);

    return 42;

}



async function functionB() {

    await wait(200);

    return answer;

}



functionB()

.then(async (result) => {

    console.log(result); // answer

    const v = await functionA();

    if (v < 60) {

        console.log(Waiting 400ms...);

        await wait(400);

        console.log(Done waiting);

    }

    console.log(v);      // 42

})

.catch(error => {

    // ...handle error...

});