Async JavaScript (Promises & Async/Await)

JavaScript is single-threaded, meaning it can only do one thing at a time. But if it waits for a server response (which takes seconds), the whole page would freeze!

Asynchronous JavaScript allows us to start a task (like fetching data) and let the rest of the code run while waiting for the result.

1. The Evolution of Async 🧬

A. Callbacks (The Old Way) 📞

We used to pass a function to be called after a task finished. This led to "Callback Hell" (nested triangles of doom).

B. Promises (The Better Way) 🤝

A Promise is an object representing the eventual completion (or failure) of an async operation.

It has 3 states:

1. Pending: Still waiting...
2. Fulfilled (Resolved): Success! 🎉
3. Rejected: Failed! ❌

C. Async/Await (The Best Way) ⚡

Introduced in ES2017, this makes async code look like synchronous code. It's just "sugar" on top of Promises.

2. Handling Errors 🛡️

With async/await, we use standard try...catch blocks.

3. Parallel Execution (Promise.all) 🚀

If you have 3 independent tasks, don't await them one by one (taking 3s total). Run them all at once (taking 1s total)!

Quiz

Key Takeaways

✅ Callbacks are old and messy.
✅ Promises are cleaner.
✅ Async/Await is the modern standard (uses Promises under the hood).
✅ Promise.all for parallel speed.

What's Next?

We've covered the core of Async JS. Now let's look at specific Error Handling Patterns for async code.

Keep coding! 🚀