Interview question

What are common mistakes developers make with Promises and async/await? Promises और async/await के साथ developers कौन-सी common mistakes करते हैं?

Answer

Mistake	Problem	Fix
Forgetting to return a promise in a chain	Next .then() gets undefined instead of resolved value	Always return inside .then() callbacks
Mixing async/await with .then() unnecessarily	Confusing, error-prone code	Pick one style consistently
Not handling rejections	Unhandled promise rejection warnings/crashes	Always use .catch() or try/catch
Awaiting sequentially when parallel is possible	Unnecessary slowdown	Use Promise.all() for independent operations

// MISTAKE 1: Forgetting to return in .then()
fetchUser(1)
    .then(user => {
        fetchOrders(user.id); // missing 'return' - not chained properly
    })
    .then(orders => {
        console.log(orders); // undefined, ran before fetchOrders resolved
    });

// FIX
fetchUser(1)
    .then(user => {
        return fetchOrders(user.id); // properly chained
    })
    .then(orders => {
        console.log(orders); // correct data
    });

// MISTAKE 2: Unhandled rejection
async function risky() {
    const data = await fetch('/might-404');
    return data;
}
risky(); // if this rejects, it's an unhandled promise rejection

// FIX
risky().catch(err => console.log('Handled:', err));

// MISTAKE 3: Sequential awaits for independent operations
async function slow() {
    const a = await taskA(); // waits
    const b = await taskB(); // waits again unnecessarily
    return [a, b];
}

// FIX
async function fast() {
    const [a, b] = await Promise.all([taskA(), taskB()]);
    return [a, b];
}

// MISTAKE 4: Creating a new Promise around an already-async function
// (the 'Promise constructor antipattern')
function wrapped() {
    return new Promise((resolve, reject) => {
        someAsyncFn().then(resolve).catch(reject); // unnecessary wrapping
    });
}
// FIX - just return the promise directly
function simple() {
    return someAsyncFn();
}

Mistake	Problem	Fix
.then() में return भूलना	अगला .then() undefined पाता है	हमेशा return करें
async/await और .then() mix करना	Confusing code	एक style चुनें
Rejections handle न करना	Unhandled rejection warnings	हमेशा catch/try-catch use करें
Independent operations sequentially await करना	अनावश्यक slowdown	Promise.all() use करें

// गलती 1: return भूलना
fetchUser(1)
    .then(user => {
        fetchOrders(user.id); // 'return' missing
    })
    .then(orders => {
        console.log(orders); // undefined
    });

// सही
fetchUser(1)
    .then(user => {
        return fetchOrders(user.id);
    })
    .then(orders => console.log(orders));

// गलती 2: Unhandled rejection
async function risky() {
    const data = await fetch('/might-404');
    return data;
}
risky(); // reject होने पर unhandled

// सही
risky().catch(err => console.log('Handled:', err));

// गलती 3: Sequential awaits जब parallel हो सकता है
async function slow() {
    const a = await taskA();
    const b = await taskB();
    return [a, b];
}

// सही
async function fast() {
    const [a, b] = await Promise.all([taskA(), taskB()]);
    return [a, b];
}

Was this answer clear?

Subjects

Related questions