#11 JavaScript Code Snippets: Promises, Async/Await and Event Loop

Promise.resolve("JS")
    .then(value => console.log(value));

Promise.resolve() creates a fulfilled promise. The value reaches the then() callback.

Promise.reject("Failed")
    .catch(err => console.log(err));

Rejected promises are handled by catch().

Promise.resolve(5)
    .then(value => value * 2)
    .then(value => console.log(value));

The returned value from one then() becomes the input of the next then().

Promise.resolve(2)
    .then(value => value + 3)
    .then(value => value * 2)
    .then(value => console.log(value));

The chain executes sequentially: 2 → 5 → 10.

Promise.resolve("A")
    .then(value => {
        console.log(value);

        return "B";
    })
    .then(value => console.log(value));

The returned value is passed to the next then().

Promise.resolve(10)
    .then(value => {
        throw new Error("Oops");
    })
    .catch(err => console.log("Caught"));

Throwing inside then() rejects the promise and moves control to catch().

Promise.reject("Error")
    .catch(err => {
        return "Recovered";
    })
    .then(value => console.log(value));

Returning from catch() converts the chain back into a fulfilled state.

Promise.resolve(1)
    .finally(() => console.log("Done"));

finally() runs regardless of fulfillment or rejection.

Promise.reject("Failed")
    .finally(() => console.log("Done"));

finally() executes for both resolved and rejected promises.

Promise.resolve(1)
    .then(value => {
        return Promise.resolve(value + 1);
    })
    .then(value => console.log(value));

Returning a promise automatically unwraps its resolved value.

Promise.resolve("JS")
    .then(value => {
        console.log(value);

        return value;
    })
    .finally(() => console.log("Done"));

then() executes first. finally() runs after the promise settles.

Promise.resolve(5)
    .then(value => value * 2)
    .then(value => value + 1)
    .then(console.log);

5 → 10 → 11.

Promise.resolve()
    .then(() => {
        throw "Failed";
    })
    .catch(err => console.log(err));

Any thrown value becomes the rejection reason.

Promise.resolve(1)
    .then(value => {
        return value + 1;
    })
    .then(value => {
        return value + 1;
    })
    .then(console.log);

1 → 2 → 3 through the chain.

Promise.resolve("Start")
    .then(value => {
        console.log(value);

        throw "Boom";
    })
    .catch(err => {
        console.log(err);
    });

The first then() runs successfully. The thrown value is handled by catch().

async function test() {
    return 100;
}

test().then(console.log);

An async function always returns a Promise. The promise resolves with 100.

async function test() {
    return Promise.resolve(200);
}

test().then(console.log);

The returned promise is automatically unwrapped.

async function test() {
    const value = await Promise.resolve(50);

    console.log(value);
}

test();

await pauses execution until the promise resolves.

async function test() {
    return await Promise.resolve(10);
}

test().then(console.log);

await resolves the promise before returning the value.

async function test() {
    throw new Error("Failed");
}

test().catch(() => console.log("Caught"));

Throwing inside an async function rejects the returned promise.

async function test() {
    try {
        await Promise.reject("Oops");
    } catch {
        console.log("Handled");
    }
}

test();

try/catch works with await just like synchronous exceptions.

async function test() {
    const a = await Promise.resolve(2);
    const b = await Promise.resolve(3);

    console.log(a + b);
}

test();

Both promises resolve and their values are added.

Promise.all([
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3)
]).then(console.log);

Promise.all resolves with an array of all results.

Promise.all([
    Promise.resolve(1),
    Promise.reject("Failed"),
    Promise.resolve(3)
]).catch(console.log);

Promise.all rejects immediately when any promise rejects.

Promise.allSettled([
    Promise.resolve("A"),
    Promise.reject("B")
]).then(result => {
    console.log(result.length);
});

allSettled waits for every promise regardless of outcome.

Promise.race([
    Promise.resolve("Fast"),
    Promise.resolve("Slow")
]).then(console.log);

race settles with the first promise that settles.

Promise.any([
    Promise.reject("A"),
    Promise.resolve("B"),
    Promise.resolve("C")
]).then(console.log);

Promise.any resolves with the first fulfilled promise.

async function test() {
    try {
        return await Promise.reject("Error");
    } catch {
        return "Recovered";
    }
}

test().then(console.log);

The rejection is caught and a new value is returned.

async function test() {
    const value = await 10;

    console.log(value);
}

test();

await also works with non-promise values.

async function test() {
    return "JavaScript";
}

(async function() {
    const result = await test();

    console.log(result);
})();

The awaited promise resolves and returns the value.

console.log("A");

setTimeout(() => {
    console.log("B");
}, 0);

console.log("C");

setTimeout callbacks run after the current call stack is empty.

console.log("A");

Promise.resolve()
    .then(() => console.log("B"));

console.log("C");

Promise callbacks are placed in the microtask queue.

console.log("A");

setTimeout(() => console.log("B"), 0);

Promise.resolve()
    .then(() => console.log("C"));

console.log("D");

Microtasks run before macrotasks.

setTimeout(() => console.log("A"), 0);

Promise.resolve()
    .then(() => console.log("B"));

Promise.resolve()
    .then(() => console.log("C"));

All microtasks finish before the timer callback executes.

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve()
    .then(() => console.log("Promise"));

console.log("End");

Synchronous code → microtasks → macrotasks.

async function test() {
    console.log("A");

    await Promise.resolve();

    console.log("B");
}

test();

console.log("C");

Code after await runs as a microtask.

async function test() {
    await Promise.resolve();

    console.log("A");
}

console.log("B");

test();

console.log("C");

The function pauses at await and resumes later.

console.log("A");

Promise.resolve()
    .then(() => {
        console.log("B");

        return Promise.resolve();
    })
    .then(() => {
        console.log("C");
    });

console.log("D");

Each then() callback becomes a microtask.

console.log("A");

setTimeout(() => {
    console.log("B");

    Promise.resolve()
        .then(() => console.log("C"));
}, 0);

console.log("D");

The promise callback runs after the timer callback finishes.

Promise.resolve()
    .then(() => {
        console.log(1);
    })
    .then(() => {
        console.log(2);
    });

console.log(3);

The synchronous log executes first.

setTimeout(() => console.log("A"), 0);

Promise.resolve()
    .then(() => console.log("B"));

queueMicrotask(() => console.log("C"));

Microtasks execute in the order they are queued.

async function test() {
    console.log("A");

    await 0;

    console.log("B");
}

test();

Promise.resolve()
    .then(() => console.log("C"));

The continuation after await is queued before the Promise.then microtask.

console.log("A");

Promise.resolve()
    .then(() => {
        console.log("B");

        setTimeout(() => {
            console.log("C");
        }, 0);
    });

console.log("D");

The timer is scheduled during a microtask and runs later.

Promise.resolve()
    .then(() => {
        console.log("A");

        return Promise.resolve();
    })
    .then(() => {
        console.log("B");
    });

setTimeout(() => {
    console.log("C");
}, 0);

All promise microtasks finish before timers.

console.log("Start");

setTimeout(() => console.log("Timer"), 0);

Promise.resolve()
    .then(() => console.log("Promise 1"))
    .then(() => console.log("Promise 2"));

console.log("End");

Synchronous code runs first, then all microtasks, then macrotasks.