一,了解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.cardNoparam.owner = this.cardInfo.owner.idparam.remark = this.remarkGiftCardApi.present(param).then(async res => {// @ts-ignoreuni.hideLoading({ noConflict: true })this.close()resolve(await this.giftShowFun())}).catch(error => {reject()// @ts-ignoreuni.hideLoading({ noConflict: true })uni.showToast({ title: error.message, icon: 'none' })})})}giftShowFun() {return new Promise((resolve, reject) => {let param: GiftCardOwnerRequest = new GiftCardOwnerRequest()param.page = 0param.pageSize = 1param.cardNoEq = this.cardInfo.cardNoGiftCardApi.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 方法里用一个变量来接收,这样才执行后面的代码。