回调地狱的形成和解决的两种方式
作者：互联网
<!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>
<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