What are the states of a promise?

A promise is a fundamental concept in JavaScript that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Understanding the states of a promise is crucial for effective asynchronous programming. A promise can exist in one of three states: pending, fulfilled, or rejected. Each state has specific characteristics and implications for handling asynchronous code.

Promise States

1. Pending

The initial state of a promise is pending. In this state, the promise is neither fulfilled nor rejected. It is waiting for the asynchronous operation to complete. During this time, the promise can be thought of as a placeholder for a future value.

For example, when you initiate a network request, the promise returned by the request is in the pending state until the request either succeeds or fails:

const fetchData = () => {
    return new Promise((resolve, reject) => {
        // Simulating a network request
        setTimeout(() => {
            const success = true; // Simulate success or failure
            if (success) {
                resolve("Data fetched successfully!");
            } else {
                reject("Error fetching data.");
            }
        }, 2000);
    });
};

const promise = fetchData();
console.log(promise); // Promise {  }

2. Fulfilled

When the asynchronous operation completes successfully, the promise transitions to the fulfilled state. In this state, the promise has a resolved value, which can be accessed using the then method. This is where you handle the successful result of the operation.

Continuing from the previous example, if the network request is successful, the promise will be fulfilled:

promise
    .then((result) => {
        console.log(result); // Output: Data fetched successfully!
    })
    .catch((error) => {
        console.error(error);
    });

3. Rejected

If the asynchronous operation fails, the promise transitions to the rejected state. In this state, the promise has a reason for the failure, which can be accessed using the catch method. This is where you handle errors that occur during the operation.

In our example, if the network request fails, the promise will be rejected:

const fetchDataWithError = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = false; // Simulate failure
            if (success) {
                resolve("Data fetched successfully!");
            } else {
                reject("Error fetching data.");
            }
        }, 2000);
    });
};

fetchDataWithError()
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error); // Output: Error fetching data.
    });

Best Practices

• Always return promises: When creating functions that perform asynchronous operations, always return a promise. This allows callers to chain then and catch methods for handling results and errors.
• Use async/await: For cleaner and more readable code, consider using async/await syntax. This allows you to write asynchronous code that looks synchronous, making it easier to understand and maintain.
• Handle errors properly: Always use catch to handle errors. This ensures that any errors in the promise chain are caught and handled gracefully.

Common Mistakes

• Not returning promises: Failing to return a promise from a function can lead to unhandled promise rejections and makes it difficult to manage asynchronous flows.
• Ignoring errors: Not using catch to handle errors can result in unhandled exceptions, which can crash your application or lead to unexpected behavior.
• Mixing callback and promise styles: Mixing callback-based code with promises can lead to confusion and complicate error handling. Stick to one style for consistency.

In summary, understanding the states of a promise—pending, fulfilled, and rejected—is essential for working effectively with asynchronous operations in JavaScript. By following best practices and avoiding common mistakes, developers can write more robust and maintainable code.