JavaScript Promises and async/await

Most JavaScript runs instantly: add two numbers, show a message, done. But some work takes time — asking a server for data, waiting for a file to load, or simply waiting two seconds. JavaScript does not freeze the page while it waits. Instead it makes a Promise: "I will give you an answer later." Your code can carry on with other things, and when the answer arrives, JavaScript lets you know.

Diagram — see how it fits together

Think of ordering chai at a busy shop. You do not stand at the counter blocking everyone else — you get a token number, sit down, and the shop calls your number when the chai is ready. The token is the Promise. The call is the answer. And async/await is like sitting at the table and simply waiting for your number to be called, without doing anything else in between.

Promises — then and catch

let order = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Your chai is ready!"), 2000);
});
order.then(message => console.log(message))
     .catch(error => console.log("Failed: " + error));

A Promise has three states: pending (waiting), fulfilled (done, with a value) and rejected (failed, with a reason). You create one with new Promise and two functions: resolve for success and reject for failure. .then() runs when the promise succeeds and receives the value. .catch() runs when it fails and receives the reason. You can chain them: each .then() passes its result to the next one, like a line of people passing a parcel.

async/await — waiting in plain words

async function orderChai() {
  try {
    let message = await order;
    console.log(message);
  } catch (error) {
    console.log("Failed: " + error);
  }
}

async/await is the same idea written in plain words. Mark a function async, and inside it you can write await before a promise — the function pauses there until the promise settles, then carries on with the value, as if the waiting never happened. Errors are caught with the same try...catch you already know. It reads like normal step-by-step code, which is why it is the standard style in real projects.

Two rules: await only works inside an async function, and an async function always returns a promise itself — even if you return a plain value, it comes back wrapped in a promise.

setTimeout — the simplest wait

setTimeout(function, milliseconds) runs a function once, after a delay. setTimeout(() => console.log("Done"), 2000) waits two seconds, then prints. It is not a promise itself, but you can wrap it in one — which is exactly what the example below does. setInterval is its cousin: it repeats the function every so many milliseconds, until you stop it with clearInterval.

Common mistakes

• Forgetting .catch() — a rejected promise with no handler fails silently in your code and loudly in the console.
• Using await outside an async function — it is a syntax error. The function must be marked async.
• Thinking await freezes the whole page — it only pauses that one function. The rest of the page keeps working.
• Returning a value from an async function and treating it as a plain value — it is a promise, so you need .then() or another await to read it.

Remember

• A Promise is pending, then fulfilled or rejected. resolve succeeds, reject fails.
• .then() handles success, .catch() handles failure. Chain them in order.
• async/await reads like step-by-step code; await only works inside async.
• setTimeout(fn, ms) runs a function once after a delay.
• Promise now, answer later — then, catch, or await.

Example explained

• function makeChai() { return new Promise((resolve) => { ... }); } — a function that returns a promise. The chai takes 2 seconds, so the promise settles later.
• setTimeout(() => resolve("Your masala chai is ready!"), 2000); — after 2000 milliseconds the promise is fulfilled with the message.
• document.getElementById("out").textContent = "Making your chai..."; — the status changes immediately, so the user knows the order was accepted.
• makeChai().then(message => { ... }); — when the promise settles, the message is shown on the page. Nothing is frozen while waiting.
• .catch(error => { ... }) — if anything failed, the error message would be shown instead. Always catch.