其他分享
首页 > 其他分享> > 回调地狱的形成和解决的两种方式

回调地狱的形成和解决的两种方式

作者:互联网

<!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>

标签:function,getTea,地狱,console,log,两种,奶茶,回调,data
来源: https://www.cnblogs.com/ruby888/p/16425136.html