OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How async function is getting executed before second .then()?

  • Thread starter Thread starter Hanzala Sarguroh
  • Start date Start date
H

Hanzala Sarguroh

Guest
I'm experiencing an unexpected order of execution when using Promises and async/await in JavaScript. Here’s the code snippet:

Code:
let a = "Hanzala"
let newPromise = new Promise((resolve, reject) => {
    let error = false
    if (!error) {
        setTimeout(() => {
            console.log("Async Task");
            resolve(a)
        }, 1000)
    } else {
        reject("Error")
    }
});


newPromise
.then((data) => {
    console.log("Async resolved",data)
    return data.toUpperCase()
})
.then((data) => {
    console.log(data+" from second then")
})
.catch((e) => {
    console.log(e + " Async rejected");
});

(async () => {
    try {
        const res = await newPromise
        console.log(res+ " from async await")
    } catch (error) {
        console.log(error+"Error form async");
    }
})();

The Output is :

Code:
Async Task
Async resolved Hanzala
Hanzala from async await
HANZALA from second then

Question:

Why does the output order differ from my expectation? Specifically, why does the log "Hanzala from async await" appear before "HANZALA from second then"?

expected Output:

Code:
Async Task
Async resolved Hanzala
HANZALA from second then
Hanzala from async await

Additional Information:

  • I understand that both Promises and async/await use the microtask queue, but I’m unclear on how their execution order is determined in this scenario.
  • Any insights into how the event loop handles this would be appreciated.

<p>I'm experiencing an unexpected order of execution when using Promises and async/await in JavaScript. Here’s the code snippet:</p>
<pre class="lang-js prettyprint-override"><code>let a = "Hanzala"
let newPromise = new Promise((resolve, reject) => {
let error = false
if (!error) {
setTimeout(() => {
console.log("Async Task");
resolve(a)
}, 1000)
} else {
reject("Error")
}
});


newPromise
.then((data) => {
console.log("Async resolved",data)
return data.toUpperCase()
})
.then((data) => {
console.log(data+" from second then")
})
.catch((e) => {
console.log(e + " Async rejected");
});

(async () => {
try {
const res = await newPromise
console.log(res+ " from async await")
} catch (error) {
console.log(error+"Error form async");
}
})();
</code></pre>
<p>The Output is :</p>
<pre><code>Async Task
Async resolved Hanzala
Hanzala from async await
HANZALA from second then
</code></pre>
<p>Question:</p>
<p>Why does the output order differ from my expectation? Specifically, why does the log "Hanzala from async await" appear before "HANZALA from second then"?</p>
<p>expected Output:</p>
<pre><code>Async Task
Async resolved Hanzala
HANZALA from second then
Hanzala from async await
</code></pre>
<p>Additional Information:</p>
<ul>
<li>I understand that both Promises and async/await use the microtask queue, but I’m unclear on how their execution order is determined in this scenario.</li>
<li>Any insights into how the event loop handles this would be appreciated.</li>
</ul>
 

Latest posts

Top