AWS Builder Center

Builder Center

📘 Async / Await Explained Clearly (Beginner → Advanced)

📘 Async / Await Explained Clearly (Beginner → Advanced) This guide explains async/await in the simplest but deep way. We will understand: What is async? What is await? Why we need async/await? How it works internally Execution flow Error handling Parallel vs Sequential calls Common mistakes Interview understanding 🔹 1️⃣ What is async?

Surya Sah

📘 Async / Await Explained Clearly (Beginner → Advanced)
This guide explains async/await in the simplest but deep way.
We will understand:
  • What is async?
  • What is await?
  • Why we need async/await?
  • How it works internally
  • Execution flow
  • Error handling
  • Parallel vs Sequential calls
  • Common mistakes
  • Interview understanding

🔹 1️⃣ What is async?

When you write:
1
2
3
async function getData() {
return "Hello";
}
JavaScript automatically converts this into:
1
2
3
function getData() {
return Promise.resolve("Hello");
}
Important:
Every async function ALWAYS returns a Promise.
Even if you return a normal value.

🔹 2️⃣ What is await?

await is used inside an async function.
It means:
Pause this function until the Promise resolves.
Example:
1
2
3
4
async function example() {
const result = await Promise.resolve(10);
console.log(result);
}
Here:
  • await waits for Promise to resolve
  • Then continues execution

🔹 3️⃣ Why Do We Need async/await?

Before async/await, we used .then():
1
2
3
4
fetch("/api")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
With async/await:
1
2
3
4
5
6
7
8
9
async function getData() {
try {
const res = await fetch("/api");
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
Cleaner.
Readable.
Looks synchronous.

🔹 4️⃣ How async/await Works Internally

Important:
async/await is just syntactic sugar over Promises.
This:
1
const result = await fetch("/api");
Internally becomes:
1
2
3
fetch("/api").then(result => {
// continue execution
});
It still uses:
  • Promise
  • Microtask queue
  • Event loop

🔹 5️⃣ Execution Order Example

1
2
3
4
5
6
7
8
9
10
11
console.log("1");

async function test() {
console.log("2");
await Promise.resolve();
console.log("3");
}

test();

console.log("4");
Output:
1
2
3
4
1
2
4
3
Explanation:
1️⃣ Sync code runs first
2️⃣ await pauses function
3️⃣ Remaining code goes to Microtask Queue
4️⃣ Executes after stack empty

🔹 6️⃣ Sequential vs Parallel Calls

❌ Sequential (Slower)

1
2
const res1 = await fetch("/api/1");
const res2 = await fetch("/api/2");
Second API waits for first to finish.

✅ Parallel (Faster – Production Best Practice)

1
2
3
4
const [res1, res2] = await Promise.all([
fetch("/api/1"),
fetch("/api/2")
]);
Both run at same time.
Faster.
Efficient.

🔹 7️⃣ Error Handling

Use try/catch:
1
2
3
4
5
6
7
8
9
async function getData() {
try {
const res = await fetch("/api");
const data = await res.json();
return data;
} catch (error) {
console.error("Error:", error);
}
}
If promise rejects → catch block runs.

🔹 8️⃣ Common Mistakes

❌ Using await outside async function
❌ Over-awaiting (blocking parallel calls)
❌ Forgetting try/catch
❌ Thinking async makes code multi-threaded
Important:
JavaScript is still single-threaded.

🔹 9️⃣ When NOT to Use await

Bad pattern:
1
2
3
for (let i = 0; i < 5; i++) {
await fetch(`/api/${i}`);
}
This runs sequentially.
Better:
1
2
3
await Promise.all(
Array.from({ length: 5 }, (_, i) => fetch(`/api/${i}`))
);
Parallel execution.

🔹 🔟 Deep Internal Model

When you write:
1
await promise;
Engine does:
1️⃣ Pause current async function
2️⃣ Store remaining code
3️⃣ Move it to Microtask Queue
4️⃣ Resume when Promise resolves

🔹 1️⃣1️⃣ Interview Questions

❓ Does async create new thread?

No.
It only pauses function execution.

❓ What does async return?

Always a Promise.

❓ Is await blocking?

It blocks ONLY inside that async function.
It does NOT block the entire JavaScript engine.

🔹 1️⃣2️⃣ Real World API Example

1
2
3
4
5
6
7
8
async function getUser() {
try {
const response = await axios.get("/api/user");
return response.data;
} catch (error) {
throw error;
}
}
Usage:
1
const user = await getUser();
Clean.
Readable.
Production-ready.

🎯 Final Simple Understanding

Async/Await is:
1️⃣ Cleaner way to handle Promises
2️⃣ Built on top of Promise system
3️⃣ Uses Microtask queue
4️⃣ Makes async code look synchronous

🏁 One-Line Summary

async/await is syntactic sugar over Promises that allows writing asynchronous code in a synchronous style.
End of Document.
# javascript# async
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article