当前位置：首页 > news >正文

Promise,async/await的运用

news 2025/6/24 9:18:09

一，了解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 方法里用一个变量来接收，这样才执行后面的代码。

查看全文

http://www.lryc.cn/news/386469.html