回调地狱与解决方案

news2024/11/27 4:36:40

什么是回调地狱？
简单理解就是回调函数嵌套回调
示例：

    setTimeout(() => {
        console.log(1);
        setTimeout(() => {
            console.log(2);
            setTimeout(() => {
                console.log(3);
            }, 1000);
        }, 2000)
    }, 3000)

在这里插入图片描述

如上代码所示，回调函数嵌套回调，就形成了回调地狱
我们该如何解决回调地狱的问题，这里有两种方案，让我为大家介绍一下

解决回调地狱的两种方案

一、Promise
我们可以使用Promise解决回调地狱的问题
示例：

    // 封装
    // 传入两个参数 第一个成功的参数 第二个布尔值 默认给一个true
    function main(data, isFlag = true) {
        return new Promise((resolve, reject) => {
            // 自定义一个flag 如果为true 执行resolve 成功 如果为false 执行reject
            let flag = isFlag
            if (flag) {
                setTimeout(() => {
                    resolve(data)
                })
            } else {
                reject("reject的情况下")
            }
        })
    }
    main(1).then(value => {
        console.log(value);
        return main(2)
    }).then(value => {
        console.log(value);
        return main(3)
    }).then(value => {
        console.log(value);
        //这里是给大家演示一下PromiseState状态为rejected时的情况下
        return main("", false)
    }).catch(reason => {
        // 失败执行
        console.log(reason);
    })

在这里插入图片描述

二、async/await

    // async 可以单独使用 但await必须和async一起使用
    async function test() {
        let p1 = await main(1)
        let p2 = await main(2)
        let p3 = await main(3)
        console.log(p1);
        console.log(p2);
        console.log(p3);
    }
    test()