一,了解Promise
Promise是异步编程的一种解决方案,它是一个对象,可以获取异步操作的消息,它的出现避免了地狱回调。
(1)Promise的实例有三个状态:
Pending(进行中)
Resolved(已完成)
Rejected(已拒绝)
(2)Promise的实例有两个过程
Pending -> fulfilled:Resolved(已完成)
Pending -> rejected:Rejected(已拒绝)
刚开始Promise的状态为Pending,任务完成了状态变成了Resolved、没有完成失败了就变成了
Rejected。
注意:Promise一旦进入状态变成为其他状态就永远不会更改状态了。
(3)Promise的基本使用
我们可以使用new Promise()来创建promise对象,但也可以使用promise.resolve()和
promise.reject()这两个方法。
Promise有五个常用的方法:
then() 接收两个回调函数作为参数,成功与失败。
catch() 捕获错误。
all() 接收数组Promise对象,当数组中所有的状态都变成resolved,all方法的状态就会变成
resolved,如果有一个状态变成了rejected,那么all方法的状态就会变成rejected。
race() race方法与all一样,接受的参数是一个每项都是promise的数组,但是与all不同的是,当
最先执行完的事件执行完之后,就直接返回该promise对象的值。如果第一个promise对象状态变成了
resolved,那自身的状态变成了resolved;反之第一个promise变成rejected,那自身状态就会变成
rejected。
finally() 指不管Promise对象最终状态如何,都会执行该操作。
二,了解async/await
async/await 其实是Genterator的语法糖,它是为了优化then链而开发的。
async函数返回一个Promise对象,await可以用于等待一个async函数的返回值。如果说async函数没有返回值,它会返回Promise.resolve(undefined)。
await表达式的运算结果取决于它等的是什么。
1、 如果它等到的不是一个Promise对象,那么await表达式的运算结果就是它等到的东西;
2、如果它等到的是一个Promise对象,await就忙碌起来了,它会阻塞后面的代码,等着Promise对
象,然后得到resolve的值,作为await表达式的运算结果。
优点:
1.代码读起来更加同步;
2.async/await传递中间值同步写法,非常优雅;
3.错误处理友好,async/await可以用成熟的try/catch;
5.调式友好
三,案例
描述:微信小程序分享卡片给微信好友,在触发微信的分享功能之前,我们的要先获取到 卡片的最新数据,从而分享的卡片是最新的数据。
// 触发微信的点击事件
async onShareAppMessage() {
const newCardInfo = await this.selectFriends()
return {
title: '您有一份来自好友的心意赠礼,请查收',
path: `/pagesSub/mine/giftCard/getShareGiftCard?remark=${this.remark}&cardInfo=${encodeURIComponent(JSON.stringify(newCardInfo))}`,
imageUrl: config.ossBaseUrl + 'gift_card_share.png'
}
}
selectFriends() {
return new Promise((resolve, reject) => {
let param: GiftCardPresentRequest = new GiftCardPresentRequest()
param.cardNo = this.cardInfo.cardNo
param.owner = this.cardInfo.owner.id
param.remark = this.remark
GiftCardApi.present(param)
.then(async res => {
// @ts-ignore
uni.hideLoading({ noConflict: true })
this.close()
resolve(await this.giftShowFun())
})
.catch(error => {
reject()
// @ts-ignore
uni.hideLoading({ noConflict: true })
uni.showToast({ title: error.message, icon: 'none' })
})
})
}
giftShowFun() {
return new Promise((resolve, reject) => {
let param: GiftCardOwnerRequest = new GiftCardOwnerRequest()
param.page = 0
param.pageSize = 1
param.cardNoEq = this.cardInfo.cardNo
GiftCardApi.ownerQuery(param)
.then((res: any) => {
if (res.data) {
resolve(res.data[0])
let tempCardInfo = encodeURIComponent(JSON.stringify(res.data[0]))
uni.reLaunch({
url: `/pagesSub/mine/giftCard/giftCardDetail?cardInfo=${tempCardInfo}`
})
} else {
reject()
}
})
.catch(error => {
reject()
uni.showToast({ title: error.message, icon: 'none' })
})
})
}
触发 onShareAppMessage 方法,利用async/await 处理各方法的执行顺序,先执行完selectFriends(),返回的是一个Promise对象,但selectFriends()里面又要执行完giftShowFun(),所以利用async/await等待giftShowFun()方法执行完,并且返回最新数据,这样层层递上,在onShareAppMessage 方法里用一个变量来接收,这样才执行后面的代码。