参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
//async函数 一定返回一个promise对象、 awiat修饰async放在函数里面
// promise对象
// resolve可以将异步数据传递出来
let p = new Promise((resolve) => {
resolve('hello word')
})
// 通过 then 拿到异步数据
p.then((data) => {
console.log(data)
})
// 回调函数:函数作为参数、被函数内部调用
function getTea(fn) {
setTimeout(() => {
fn('奶茶')
},500)
}
function getHotPot(fn) {
setTimeout(() => {
fn('火锅')
},1000)
}
// 需求:先吃火锅、再喝奶茶、(假如再来一些其他的需求反复嵌套、会造成回调地狱,不利于维护)
getHotPot((data) => {
console.log(data)
getTea((data) => {
console.log(data);
});
})
解决回调地狱方法:
// 解决办法1:new Promise()对象、用.then方法解决
function getTea() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('喝奶茶')
}, 1000)
})
}
function getHotPot() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('吃火锅')
},2000)
})
}
getHotPot().then((data) => {
console.log(data)
return getTea()
}).then((data) => {
console.log(data)
})
// 解决方法2:async函数(推荐使用)
async function getData() {
// (await 后面加上一个 promise对象) 就可以直接获取resolve传递出来的异步数据
let hotPot = await getHotPot()
console.log(hotPot)
let tea = await getTea()
console.log(tea)
}
getData()