标签：function getTea 地狱 console log 两种 奶茶 回调 data
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。