回调函数实现先拿火锅再拿奶茶功能

// 先创建一个喝奶茶函数，在500ms后执行
function getTea(fn){
    setTimeout(()=>{
        fn('奶茶')
    },500)
}
// 再创建一个吃火锅函数，在800ms后执行
function getHotpot(fn){
    setTimeout(()=>{
        fn('火锅')
    },800)
}
// 调用喝奶茶函数
getTea(function(data){
    console.log(data)//500ms后输出"奶茶"
})

// 调用吃火锅函数
getHotpot(function(data){
    console.log(data)//800ms后输出"火锅"
})

// 那我想先输出火锅再输出奶茶行吗？
getHotpot(function(data){
    console.log(data)//800ms后先输出"火锅"
    getTea(function(data){
        console.log(data)//500ms后再输出"奶茶"
    })
})
// 注意：上述方法容易引起回调地狱!

Promise 对象举例

// Promise 对象
// resolve 可以将异步数据传递出来
let p = new Promise(function(resolve){
    resolve('hello word')
}) 

// 通过 then 拿到异步数据
p.then(function(data){
    console.log(data) //hello word
})

Promise 实现先拿火锅再拿奶茶功能

// 先创建一个喝奶茶函数，在500ms后执行
function getTea() {
    return new Promise(function (resolve) {
        setTimeout(() => {
            resolve('奶茶')
        }, 500)
    })
}

getTea().then(function(data){
    console.log(data) //奶茶
})

// 再创建一个吃火锅函数，在800ms后执行
function getHotpot() {
    return new Promise(function (resolve) {
        setTimeout(() => {
            resolve('火锅')
        }, 800)
    })
}

getHotpot().then(function(data){
    console.log(data) //火锅
})

// 先吃火锅再喝奶茶
getHotpot().then(function(data){
    console.log(data) //火锅
    return getTea()
}).then(function(data){
    console.log(data)
})
// 相比于回调函数可读性可维护性性等都更好

async函数实现先拿火锅再拿奶茶功能

// async 函数
// 先创建一个喝奶茶函数，在500ms后执行
function getTea() {
    return new Promise(function (resolve) {
        setTimeout(() => {
            resolve('奶茶')
        }, 500)
    })
}

getTea().then(function(data){
    console.log(data) //奶茶
})

// 再创建一个吃火锅函数，在800ms后执行
function getHotpot() {
    return new Promise(function (resolve) {
        setTimeout(() => {
            resolve('火锅')
        }, 800)
    })
}

getHotpot().then(function(data){
    console.log(data) //火锅
})


async function getData(){
    // 直接获取resolve传递出来的异步数据。
    let hotPot = await getHotpot()
    console.log(hotPot)
    let tea = await getTea()
    console.log(tea)
}
getData()