Promises in JavaScript

As you learned earlier, JavaScript is asynchronous — it does not wait for long tasks like:

• API calls

• File loading

• Database operations

• Timers

• User interactions

Before Promises were introduced, developers used callbacks, which often caused complicated code (“callback hell”).

Promises were added to JavaScript to handle asynchronous tasks in a clean, readable, and manageable way.

What Is a Promise?

A Promise is a JavaScript object that represents:

• A value that will be available now, later, or never.

Think of a promise like ordering food online:

• Order placed ? Promise created

• Food is being prepared ? Pending

• Food delivered ? Fulfilled

• Restaurant cancels ? Rejected

Promises work the same way.

Promise States

A Promise has three states:

1. pending ? waiting

2. fulfilled ? success

3. rejected ? failure

Creating a Promise

let myPromise = new Promise(function(resolve, reject) {
    let success = true;

    if (success) {
        resolve("Task completed");
    } else {
        reject("Task failed");
    }
});

Using then() and catch()

myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error);
    });

If resolve() is called ? then() runs
If reject() is called ? catch() runs

Example 1: Simple Promise With setTimeout

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data loaded");
    }, 2000);
});

promise.then(msg => console.log(msg));

Output (after 2 seconds):

Data loaded

Example 2: Promise With Rejection

let p = new Promise((resolve, reject) => {
    let serverUp = false;

    if (serverUp) {
        resolve("Connected to server");
    } else {
        reject("Server is down");
    }
});

p.then(result => console.log(result))
 .catch(error => console.log(error));

Output:

Server is down

Example 3: API Simulation Using Promises

function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("User data received");
        }, 1500);
    });
}

getData().then(msg => console.log(msg));

Output:

User data received

Chaining Promises

You can run promises one after another.

function step1() {
    return Promise.resolve("Step 1 done");
}

function step2() {
    return Promise.resolve("Step 2 done");
}

function step3() {
    return Promise.resolve("Step 3 done");
}

step1()
    .then(res => {
        console.log(res);
        return step2();
    })
    .then(res => {
        console.log(res);
        return step3();
    })
    .then(res => console.log(res));

Output:

Step 1 done
Step 2 done
Step 3 done

Promise.all()

Runs all promises together and waits for all to finish.

let p1 = Promise.resolve("First");
let p2 = Promise.resolve("Second");
let p3 = Promise.resolve("Third");

Promise.all([p1, p2, p3]).then(result => console.log(result));

Output:

["First", "Second", "Third"]

Promise.race()

Returns the promise that finishes first.

let fast = new Promise(resolve => setTimeout(resolve, 500, "Fast"));
let slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow]).then(result => console.log(result));

Output:

Fast

Real-Life Example: Login System Simulation

function login(user, pass) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (user === "admin" && pass === "1234") {
                resolve("Login successful");
            } else {
                reject("Invalid credentials");
            }
        }, 1000);
    });
}

login("admin", "1234")
    .then(msg => console.log(msg))
    .catch(err => console.log(err));

Example Program (Complete)

function getUser() {
    return new Promise(resolve => {
        setTimeout(() => resolve("User fetched"), 1000);
    });
}

function getOrders() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Orders fetched"), 1500);
    });
}

getUser()
    .then(res => {
        console.log(res);
        return getOrders();
    })
    .then(res => console.log(res));

Output:

User fetched
Orders fetched

Common Mistakes Beginners Make

1. Forgetting to return inside .then()

2. Not writing catch() to handle errors

3. Mixing callbacks and promises unnecessarily

4. Confusing resolve and reject

5. Expecting synchronous behavior from async code

Practice Tasks (Do It Yourself)

1. Create a promise that resolves after 2 seconds.

2. Create a promise that rejects if a number is negative.

3. Make three promises and use Promise.all().

4. Use Promise.race() to see which promise finishes first.

5. Create a fake API function that loads data using a promise.