JavaScript Best Practices for Working with Promises

By Alessandro D.P.4 min readMarch 26, 2026

Understanding Promises

A promise in JavaScript represents the eventual completion (or failure) of an asynchronous operation and its resulting value. The promise can be in one of three states: pending, fulfilled, or rejected. Here's a basic example of creating a promise:

const examplePromise = new Promise((resolve, reject) => {
    const success = true; // Simulate success or failure
    if (success) {
        resolve("Operation was successful!");
    } else {
        reject("Operation failed.");
    }
});

Using promises correctly is essential for maintaining code quality and readability. Below are best practices to consider when working with promises.

Best Practices for Using Promises

1. Use `async`/`await` for Better Readability

The async/await syntax allows you to write asynchronous code that looks synchronous, improving readability and reducing the complexity of promise chains.

const fetchData = async () => {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchData();

2. Handle Errors Gracefully

Always handle errors in promises using .catch() or try/catch blocks with async/await. This prevents unhandled promise rejections and makes your code more robust.

const fetchDataWithErrorHandling = async () => {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error.message);
    }
};

fetchDataWithErrorHandling();

3. Avoid Promise Hell

Promise hell occurs when you have multiple nested promises, making the code hard to read and maintain. Instead, chain promises or use async/await.

Bad Example:

getData()
    .then(data => {
        return processData(data);
    })
    .then(processedData => {
        return saveData(processedData);
    })
    .then(() => {
        console.log("Data saved successfully!");
    })
    .catch(error => {
        console.error("Error:", error);
    });

Good Example:

const handleData = async () => {
    try {
        const data = await getData();
        const processedData = await processData(data);
        await saveData(processedData);
        console.log("Data saved successfully!");
    } catch (error) {
        console.error("Error:", error);
    }
};

handleData();

4. Use Promise.all for Concurrent Execution

When you need to execute multiple promises concurrently, use Promise.all(). This method takes an array of promises and returns a single promise that resolves when all of the promises have resolved.

const fetchAllData = async () => {
    try {
        const [data1, data2] = await Promise.all([
            fetch('https://api.example.com/data1'),
            fetch('https://api.example.com/data2'),
        ]);
        const jsonData1 = await data1.json();
        const jsonData2 = await data2.json();
        console.log(jsonData1, jsonData2);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
};

fetchAllData();

5. Avoid Mixing Callbacks and Promises

Mixing callbacks and promises can lead to confusion and bugs. Stick to one approach to handle asynchronous operations. If you're using promises, avoid using callbacks within them.

// Avoid this
getData((data) => {
    processData(data)
        .then(result => {
            console.log(result);
        });
});

// Prefer this
const handleData = async () => {
    const data = await getData();
    const result = await processData(data);
    console.log(result);
};

handleData();

6. Use `finally` for Cleanup

The finally() method allows you to execute code after a promise is settled, regardless of its outcome. This is useful for cleanup actions, such as closing connections or stopping loaders.

const fetchDataWithCleanup = async () => {
    let loader = startLoader();
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    } finally {
        loader.stop();
    }
};

fetchDataWithCleanup();

Summary of Best Practices

Best Practice	Description
Use `async`/`await`	Write asynchronous code that looks synchronous for better readability.
Handle Errors Gracefully	Use `.catch()` or try/catch blocks to manage errors effectively.
Avoid Promise Hell	Keep your promise chains flat to enhance readability.
Use `Promise.all`	Execute multiple promises concurrently for better performance.
Avoid Mixing Callbacks and Promises	Stick to one asynchronous handling method to reduce confusion.
Use `finally` for Cleanup	Execute cleanup code regardless of promise resolution.

By following these best practices, you can write cleaner, more maintainable JavaScript code that effectively utilizes promises.

Learn more with useful resources: