🍔 Callbacks, Promises & Async-Await Explained! Using Swiggy, Zomato & Food Orders
JavaScript runs on a single thread, yet it somehow manages to fetch APIs, read files, hit databases, and return responses without freezing your app.
How?
With Callbacks → Promises → Async–Await.
And today, we’ll understand these three using something we ALL can relate to: 👉 Ordering food from Swiggy/Zomato.
🥡 1. Callbacks - “Call me back when the food arrives”
Think of this situation:
You order food online.
You can't stand in front of the restaurant and wait.
So you tell them:
“When the food is ready, call me back.”
This is a callback - you pass a function that should run later.
PS: If you don't have node js installed in your local computer, feel free to use replit in your browser to run the codes snippets mentioned in this blog XD.
📌 Callback Example in Code
function orderFood(callback) {
console.log("Order placed... waiting for restaurant 🕒");
// Simulating a delay of 2 seconds to cook the order (just for example, otherwise we've to wait for few minutes practically hehe)
setTimeout(() => {
console.log("Food is ready! 🍱");
callback();
}, 2000);
}
orderFood(() => {
console.log("Food delivered! Enjoy 😋");
});
⭐ Problem
Callbacks seem okay… but as tasks grow:
- Order food
- Track order
- Notify delivery boy
- Update payment
- Send invoice
- etc…
It becomes Callback Hell → nested, messy code.
🧩 2. Promises - “Your order is confirmed & will be delivered!”
Promises were created to fix callback hell.
A promise is like the Swiggy app telling you:
“Your food will be delivered.
You don’t need to ask again.
Just use.then()when it arrives.”
📌 Promise Example
function orderFood() {
return new Promise((resolve, reject) => {
console.log("Order placed... 🕒");
setTimeout(() => {
const cooked = true;
if (cooked) resolve("Food delivered! 😋");
else reject("Restaurant closed 😭");
}, 2000);
});
}
orderFood()
.then(msg => console.log(msg))
.catch(err => console.log(err));
⭐ Promise Advantages
- Cleaner than callbacks
- Errors handled using .catch()
- No nested pyramids
- Values flow beautifully
⚡ 3. Async–Await - “Track your order like a King 😎”
Async–Await is the most beautiful layer on top of Promises.
When Swiggy shows:
“Food is being prepared…
Delivery partner assigned…
Arriving in 10 mins…”
You can wait for the order with clean readable steps.
Async–await lets JavaScript pause a function until the promise settles.
📌 Async–Await Example
function orderFood() {
return new Promise((resolve) => {
console.log("Order placed... 🕒");
setTimeout(() => resolve("Food delivered! 😋"), 2000);
});
}
async function trackOrder() {
console.log("Tracking started… 👀");
const result = await orderFood(); // waits here
console.log(result);
console.log("Order completed!");
}
trackOrder();
⭐ Why async–await is better?
- Looks like synchronous code
- No
.then()chaining - Error handling becomes cleaner with
try–catch
🧠 4. Under the Hood - Async–Await is just Promises
This is the part most beginners miss:
Async-Await does NOT replace Promises.
It is built ON TOP OF Promises.
Internally:
- await pauses the function
- JavaScript lets other tasks run
- When the promise resolves → execution resumes
Same as:
“Wait for the delivery update while doing other things.”
📌 Proof (async function returns a Promise)
async function hello() {
return "Hi!";
}
hello().then(console.log); // prints "Hi!"
Even when you don’t write a promise, async makes one.
🛠 5. Real-world Example - Fetching API
Using Callback (old & ugly)
getUser((data) => {
getPosts(data.id, (posts) => {
getComments(posts[0], (comments) => {
console.log(comments);
});
});
});
Using Promises
getUser()
.then(user => getPosts(user.id))
.then(posts => getComments(posts[0]))
.then(console.log);
Using Async–Await (cleanest)
async function showComments() {
const user = await getUser();
const posts = await getPosts(user.id);
const comments = await getComments(posts[0]);
console.log(comments);
}
showComments();
This is why async–await dominates modern JavaScript.
| JS Feature | Food Analogy | What it Solves |
|---|---|---|
| Callbacks | “Call me when ready” | Basic async |
| Promises | “Order confirmed → Track in app” | Avoid callback hell |
| Async–Await | “Clean step-by-step tracking” | Most readable async code |
Mastering this trio makes backend dev, API-fetching, and Express work MUCH easier.
❤️ Written By
Applexity