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

This content originally appeared on DEV Community and was authored by Applexity.Ox

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.

Mastering this trio makes backend dev, API-fetching, and Express work MUCH easier.

Written By

Applexity

This content originally appeared on DEV Community and was authored by Applexity.Ox