Question 242991 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is using await necessary with .then

I have an async function

async function f1 (){
  some db operation
  return result
}

What is the difference between the two code

await f1()
.then((result)=> something1. Can I use result here?)

vs

f1()
.then((result)=>something2. Can I use result here?)
Tags:

3

Answers


  1. 0

    To answer your immediate question: "Is using await necessary with then": no.

    The two examples in your question aren’t really comparable. Both examples are the same but in the first you’ve mysteriously added a redundant await keyword.

    The question you should ask is "What are the different approaches to using promises?" something that MDN covers well in the documentation "How to use promises".

    These updated examples are comparable. The first uses "traditional" thenable syntax. The second uses newer async/await syntax.

    f1().then(result => console.log(result));

    const result = await f1();
console.log(result);
    Login or Signup to reply.
  2. 0

    You are asking two questions, one in your title and one in the body of your question.

    "Is using await necessary with .then?"

    No, but using it will change the flow of your code.

    see: What is the order of execution in JavaScript promises? for a detailed explanation.

    "What is the difference between the two code?"

    Your first example will pause execution until the promise returned by the .then is settled so the following will log:

    Result:  42
After f1() call

    async function f1() {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return 42;
}

(async () => {
  await f1().then(result => console.log("Result: ", result));

  console.log("After f1() call");
})();

    Your second example will make the call and then immediately continue synchronous execution with the .then called asynchronously after it finishes and will log:

    After f1() call
Result:  42

    async function f1() {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return 42;
}

(async () => {
  f1().then(result => console.log("Result: ", result));

  console.log("After f1() call");
})();
    Login or Signup to reply.
  3. 0

    In both cases, you are using promises to handle the asynchronous operation of f1(), but there are some differences in how you access the result value. Let’s break down the two code examples:

    1. Using await:
    await f1()
  .then((result) => {
    // You can use 'result' here
    something1(result);
  })
  .catch((error) => {
    // Handle errors here
  });

    In this code, you are await-ing the result of the f1() function, which means that the execution of your code will pause until f1() completes, and the result will be available in the then callback for use in something1(result).

    1. Using .then() without await:
    f1()
  .then((result) => {
    // You can use 'result' here
    something2(result);
  })
  .catch((error) => {
    // Handle errors here
  });

    In this code, you are not using await, so the code will not pause and wait for f1() to complete. Instead, it will continue executing, and when f1() finishes, the then callback will be invoked with the result. You can use the result value in something2(result) within the callback.

    In summary:

    • In the first code using await, the execution of your code will pause and wait for f1() to complete, and you can use result within the then callback for something1.

    • In the second code using .then() without await, your code will continue executing, and when f1() completes, the result will be available in the then callback for something2.

    Both approaches are valid, and which one to use depends on your specific use case and how you want to handle the asynchronous behavior in your program. If you need to ensure that f1() has completed before proceeding, await is a good choice. If you want to continue with other tasks and handle the result when it’s available, using .then() without await is appropriate.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search