告别回调地狱
想想我们处理异步的方法、回调函数？
那个回调地狱显得有点low。
优雅处理异步事件
Async/await是啊呦不错呦的选择
比如你上班去了，而且晚上你上班回到家就想吃红烧肉。那你决定雇个小姐姐去弄给你吃。于是你把步骤弄出来：
- 去超市
- 买红烧肉
- 做红烧肉
- 等你下班一起吃
- 代码走一波
vue
created () {
this.hahaha()
},
methods: {
goChaoShi () {
setTimeout(() => {
console.log('去超市啦');
}, 2000);
},
maiCai () {
setTimeout(() => {
console.log('买红烧肉啦');
}, 2000);
},
doCai () {
setTimeout(() => {
console.log('做红烧肉');
}, 2000);
},
eat () {
setTimeout(() => {
console.log('一起吃');
}, 2000);
},
hahaha () {
this.goChaoShi();
this.maiCai();
this.doCai();
this.eat();
}
}
当然是一起蹦出来的，那说说我们今天的Async/await
- 代码走一波
vue
created () {
this.hahaha()
},
methods: {
goChaoShi () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('去超市啦');
resolve('超市人好多')
}, 2000);
})
},
maiCai () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('买红烧肉啦');
resolve('老板一斤肉20')
}, 2000);
})
},
doCai () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('做红烧肉');
resolve('ok')
}, 2000);
})
},
eat () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('一起吃');
resolve('nice')
}, 2000);
})
},
<!--这里的async函数返回的是 Promise 对象-->
async hahaha () {
await this.goChaoShi();
await this.maiCai();
await this.doCai();
await this.eat();
}
}
这样一来，我们就可以很舒服的知道，小姐姐不是瞬间帮你完成的了，而是在你的规划下走完这个任务。
- 到这来我们的resolve还没有用到。
- async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 所以
一般这里会用到请求传回来的结果，在上面的例子中我们可以这样用。改下hahaha.
vue
async hahaha () {
await this.goChaoShi()
.then(res => {
console.log(res);
})
await this.maiCai().then(res => {
console.log(res);
})
await this.doCai();
await this.eat();
}
这样我们就可以完美的吃到红烧肉了。bye！
