面试题：JavaScript回调函数的嵌套问题及解决方案

Question

假设有一系列需要顺序执行的异步操作，每个操作都使用回调函数来处理结果，形成了回调地狱（多层回调嵌套）。请写出这段会导致回调地狱的代码，并给出至少两种优化这种回调地狱的方法及实现代码。

Answer 1

导致回调地狱的代码

function asyncOperation1(callback) {
    setTimeout(() => {
        console.log('asyncOperation1完成');
        callback();
    }, 1000);
}

function asyncOperation2(callback) {
    setTimeout(() => {
        console.log('asyncOperation2完成');
        callback();
    }, 1000);
}

function asyncOperation3(callback) {
    setTimeout(() => {
        console.log('asyncOperation3完成');
        callback();
    }, 1000);
}

asyncOperation1(() => {
    asyncOperation2(() => {
        asyncOperation3(() => {
            console.log('所有操作完成');
        });
    });
});

优化方法一：使用Promise

function asyncOperation1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation1完成');
            resolve();
        }, 1000);
    });
}

function asyncOperation2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation2完成');
            resolve();
        }, 1000);
    });
}

function asyncOperation3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation3完成');
            resolve();
        }, 1000);
    });
}

asyncOperation1()
   .then(() => asyncOperation2())
   .then(() => asyncOperation3())
   .then(() => console.log('所有操作完成'));

优化方法二：使用async/await

function asyncOperation1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation1完成');
            resolve();
        }, 1000);
    });
}

function asyncOperation2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation2完成');
            resolve();
        }, 1000);
    });
}

function asyncOperation3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('asyncOperation3完成');
            resolve();
        }, 1000);
    });
}

async function main() {
    await asyncOperation1();
    await asyncOperation2();
    await asyncOperation3();
    console.log('所有操作完成');
}

main();