什么是回调地狱？以及如何解决回调地狱

概念

回调地狱的概念：回调函数里面嵌套回调函数。

             //地狱回调
            setTimeout(function () {  //第一层
                console.log('张三');//等3秒打印张三在执行下一个回调函数
                setTimeout(function () {  //第二层
                    console.log('李四');//等2秒打印李四在执行下一个回调函数
                    setTimeout(function () {   //第三层
                        console.log('王五');//等一秒打印王五
                    }, 1000)
                }, 2000)
            }, 3000)

回调地狱是为了让我们代码执行顺序的一种操作（解决异步），但是它会使我们的可读性非常差。

promise解决

// promise解决方式
function fn(str) {
    var promise = new Promise(function (success, error) { //success 是成功的方法  error是失败的方法  
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                success(str)
            }
            else {
                error('失败')
            }
        })
    })
    return promise;
}

fn('张三')
    .then((res) => { //then是成功执行的方法 返回的还是一个promise对象
        console.log(res);//打印张三  res是执行
        return fn('李四');
    })
    .then((res) => {
        console.log(res);
        return fn('王五')
    })
    .then((res) => {
        console.log(res);
    })
    .catch((res) => { //catch是失败执行的方法
        console.log(res);
    })

 async/await解决

//封装一个返回promise的异步任务
    function fn(str) {
        var promise = new Promise(function (success, error) {
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    success(str)
                } else {
                    error('处理失败')
                }
            })
        })
        return promise;
    }
 
    //封装一个执行上述异步任务的async函数
    async function test() {
        var res1 = await fn('张三');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2 = await fn('李四');
        var res3 = await fn('王五');
        console.log(res1);
        console.log(res2);
        console.log(res3);
    }
    //执行函数
    test();