背景:逛街你要喝奶茶、吃火锅、做美甲。但是你想要先吃火锅再喝奶茶最后再去做美甲。
在es5的时候,会通过回调函数获取异步数据。会有以下的这种写法
//获取食品的方法
function getTea(fn) {
setTimeout(() => {
fn('奶茶')
}, 500)
}
function getHotPot(fn) {
setTimeout(() => {
fn('火锅')
}, 2000)
}
function getBe(fn) {
setTimeout(() => {
fn('美甲')
}, 1000)
}
//调用获取方法
getTea((data) => console.log(data));
getHotPot((data) => console.log(data));
//如果想先吃火锅再吃奶茶就得
getHotPot(function (data) {
console.log(data)
getTea(function (data) {
console.log(data)
getBe(function (data) {
console.log(data)
})
})
})
这样很难维护,要控制顺序就需要嵌套 如果出现bug很难修,ES6出现了promise之后就不用回调函数获取异步数据了,接下来我们对上面的代码进行改造。
// promise对象 --resolve可以将异步数据传出来
let p = new Promise(function (resolve) {
resolve(data)
})
p.then((data) => {
console.log(data)
})
//改造上述问题代码
function getTea() {
return new Promise((resolve) => {
resolve('奶茶')
})
}
function getHotPot() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('火锅')
}, 2000)
})
}
function getBe() {
return new Promise((resolve) => {
resolve('美甲')
})
}
//先吃火锅再吃奶茶再做美甲
getHotPot().then(function (data) {
console.log(data);
return getTea()
}).then(function (data) {
console.log(data);
return getBe()
}).then(function (data) {
console.log(data);
})
接下来我们用async函数来实现,async函数中有await 可以获取返回的异步数据,另外async函数的返回值是promise对象
//用async函数操作
async function getData(){
let HotPot = await getHotPot();
console.log(HotPot);
let Tea = await getTea();
console.log(Tea);
let be = await getBe();
console.log(be)
}
getData();
```