回调地狱--刨析

首先概念 什么是回调地狱，回调地狱就是在使用回调函数时，嵌套的太深，导致代码可读性太差。 解决也很简单 ，让可读性变好就可以，那就用promises 和 async/await ,去简化代码就好。

下面是回调地狱的演示代码

function getUser(userId, callback) {
    setTimeout(() => {
        console.log('User data fetched for userId:', userId);
        callback(null, { userId: userId, name: 'Alice' });
    }, 1000);
}

function getOrders(userId, callback) {
    setTimeout(() => {
        console.log('Orders fetched for userId:', userId);
        callback(null, [{ orderId: 1 }, { orderId: 2 }]);
    }, 1000);
}

function getOrderDetails(orderId, callback) {
    setTimeout(() => {
        console.log('Order details fetched for orderId:', orderId);
        callback(null, { orderId: orderId, details: 'Order details' });
    }, 1000);
}

// 回调地狱示例
getUser(1, (err, user) => {
    if (err) {
        console.error('Error fetching user:', err);
        return;
    }

    getOrders(user.userId, (err, orders) => {
        if (err) {
            console.error('Error fetching orders:', err);
            return;
        }

        // 使用 forEach 遍历订单并获取每个订单的详细信息
        orders.forEach(order => {
            getOrderDetails(order.orderId, (err, orderDetails) => {
                if (err) {
                    console.error('Error fetching order details:', err);
                    return;
                }

                console.log('Order Details:', orderDetails);
            });
        });
    });
});

promises 简化：

getUser(1)
    .then(user => getOrders(user.userId))
    .then(orders => {
        return Promise.all(orders.map(order => getOrderDetails(order.orderId)));
    })
    .then(orderDetails => {
        console.log('Order Details:', orderDetails);
    })
    .catch(err => {
        console.error('Error:', err);
    });

async/await 简化：

async function fetchData() {
    try {
        const user = await getUser(1);
        const orders = await getOrders(user.userId);
        const orderDetails = await Promise.all(orders.map(order => getOrderDetails(order.orderId)));
        console.log('Order Details:', orderDetails);
    } catch (err) {
        console.error('Error:', err);
    }
}

fetchData();

可读性变好了,回调地狱的问题也就解决好了。