Async JS Explained Using Swiggy, Zomato & Food Orders 😋🍴

🍔 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