<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决回调地狱</title>
</head>

<body>
    <script>
        /**
         * 再来解决回调地狱的问题
         *
         * */
        // 原始
        // function getTea(fn) {
        //     setTimeout(() => {
        //         fn('奶茶')
        //     }, 500)
        // }

        // 修改后
        function getTea() {
            return new Promise(function(resolve) {
                setTimeout(() => {
                    resolve("奶茶")
                }, 500)
            })
        }

        //原始： 调用函getTea  传入一个回调函数打印
        // getTea(function(data) {
        //     console.log(data)
        // })

        // 修改后
        getTea().then(function(data) {
            console.log('修改后', data)

        })


        //原始： 火锅
        // function getTotPot(fn) {
        //     setTimeout(() => {
        //         fn('火锅')
        //     }, 800)
        // }
        function getTotPot() {
            return new Promise(function(resolve) {
                setTimeout(() => {
                    resolve('火锅')
                }, 800)
            })

        }
        //原始： 调用函getTotPot  传入一个回调函数打印
        // getTotPot(function(data) {
        //     console.log(data)
        // })

        // 修改后
        getTotPot().then(function(data) {
                console.log('修改后', data)

            })
            // 原始地狱情况
            //问题： 假设我就想先吃火锅再喝奶茶的时候，
            // getTotPot(function(data) {
            //     console.log(data) //火锅
            //     getTea(function(data) {
            //         console.log(data) //奶茶
            //         getTea(function(data) {
            //             console.log(data) //假设又一层
            //             getTea(function(data) {
            //                 console.log(data) //又一层
            //                 getTea(function(data) {
            //                     console.log(data) //又一层......这样就形成了回调地狱
            //                 })
            //             })
            //         })
            //     })
            // })

        // 接下来解决遇到的回调地狱问题，我非要先吃火锅再喝奶茶   ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
        /**
         *
         * 方法1
         *
         * */
        getTotPot().then(function(data) {
            console.log('修改后火锅', data)
            return getTea() //因为getTotPot return返回的是getTea()函数，它们本身返回的就是一个Promise对象，所以可以继续then()
        }).then(function(data) { //然后就这样可以一直then()下去，好维护一些☆☆☆☆☆☆☆☆☆
            console.log('修改后奶茶', data)
            return getTea()
        }).then(function(data) {
            console.log('修改后奶茶', data)
            return getTea()
        }).then(function(data) {
            console.log('修改后奶茶', data)
            return getTea()
        }).then(function(data) {
            console.log('修改后奶茶', data)
            return getTea()
        }).then(function(data) {
            console.log('修改后奶茶', data)
        })

        /**
         * 若是方法1你看得也不爽，
         * 方法2  使用async
         *
         * */
        // 同理，老子就非要先吃火锅再喝奶茶********，可以这么写
        async function getData() {
            // 使用这个方式   await加一个Promise对象，就直接能拿到resolve 传递出来的异步数据☆☆☆☆☆☆☆☆☆☆☆☆☆
            let hotPot = await getTotPot()
            console.log('async获取到的火锅', hotPot)
            let tea = await getTea()
            console.log('async获取到的奶茶', tea)
        }
        getData()
    </script>

</body>

</html>