How to use promise to avoid callback hell?

In modern JavaScript programming, using Promises is an effective way to avoid Callback Hell. Promises provide a clearer and more manageable approach to handling asynchronous operations. Below, I will explain in detail the basic concepts of Promises and how to use them to avoid Callback Hell.

1. Basic Usage of Promises

A Promise represents an asynchronous operation that will either complete or fail. It has three states:

• Pending (in progress)
• Fulfilled (successful)
• Rejected (failed)

When a Promise is created, it accepts an executor function as a parameter, which takes two arguments: resolve and reject. When the asynchronous operation completes, invoke the resolve function; when the operation fails, invoke the reject function.

javascript
let promise = new Promise((resolve, reject) => {
    // Asynchronous operation
    if (/* operation succeeds */) {
        resolve(value);
    } else {
        reject(error);
    }
});

2. Avoiding Callback Hell

Without using Promises, managing deeply nested asynchronous callbacks makes the code difficult to read and maintain. For example:

javascript
getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            console.log('Callback Hell:', c);
        });
    });
});

After using Promises, the above code can be rewritten as a chain of calls, making it clearer:

javascript
getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => console.log('Promise chain:', c))
    .catch(error => console.log('Error:', error));

In this example, each then method accepts a callback function that processes the result of the previous asynchronous operation and returns a new Promise, forming a Promise chain. The catch method is used to capture any exception from the chain.

3. Practical Example

Suppose we need to retrieve user information from an API and then obtain their order details based on that information. Using Promises, we can write it as:

javascript
function getUser(userId) {
    return new Promise((resolve, reject) => {
        // Simulate API request
        setTimeout(() => {
            resolve({userId: userId, username: 'JohnDoe'});
        }, 1000);
    });
}

function getOrder(user) {
    return new Promise((resolve, reject) => {
        // Simulate API request
        setTimeout(() => {
            resolve(['Order 1', 'Order 2', 'Order 3']);
        }, 1000);
    });
}

getUser(1)
    .then(user => {
        console.log('User Found:', user);
        return getOrder(user);
    })
    .then(orders => {
        console.log('Orders:', orders);
    })
    .catch(error => {
        console.error('Error:', error);
    });

In this example, by consistently using .then(), we avoid nested calls, making the code more concise and easier to understand.

In summary, by using Promises, we can effectively solve the Callback Hell problem, making the code cleaner and easier to maintain. Additionally, the async/await syntactic sugar introduced in ES7 further simplifies handling asynchronous operations, but it is fundamentally based on Promises.