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