解决回调地狱问题的两种方式

什么是回调地狱？

回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行条件，就是俗称的套娃

  setTimeout(() => {
            console.log(1);
            setTimeout(() => {
                console.log(11);
                setTimeout(() => {
                    console.log(111);
                }, 1000)
            }, 1000)
        }, 1000)

注意：以下代码均以用户需求为打印用户数据 订单数据 商品数据的异步编程为例

解决方式1：生成器和迭代器

    // 解决回调地狱问题 异步编程打印 用户数据 订单数据 商品数据
        function userDate() {
            setTimeout(() => {
                let data = '用户数据'
                iterator.next(data)
            }, 1000)

        }

        function orderDate() {
            setTimeout(() => {
                let data = '订单数据'
                iterator.next(data)
            }, 1000)

        }

        function goodsDate() {
            setTimeout(() => {
                let data = '商品数据'
                iterator.next(data) //使用next执行函数并传入形参
            }, 1000)

        }

        function* gen() {
            // 使用yield形成断点，接收返回结果值并打印
            let user = yield userDate()
            console.log(user);
            let order = yield orderDate()
            console.log(order);
            let good = yield goodsDate()
            console.log(good);
        }
        let iterator = gen()
        iterator.next() //使用next执行函数

解决方式2：使用promise串联多个异步任务

  let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                let data = '用户数据'
                resolve(data) //成功的返回结果，调用第一个成功的回调函数
            }, 1000)

        })
        // 每一个then方法的返回结果由他的指定函数的返回值决定
        p.then((value) => {
            // 第一个成功的回调函数返回一个新的promise对象
            console.log(value)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    let data = '订单数据'
                    resolve(data)
                }, 1000)
            }).then(value => {
                console.log(value)
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        let data = '商品数据'
                        resolve(data)
                    }, 1000)
                })
            }).then(
                value => {
                    console.log(value);
                }
            )
        }, (reason) => {
            console.log('输入错误');
        })