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

微信小程序之Promise-Promise初始用

backend 2025/5/23 8:23:27

我们来尝试使用Promise。

1、需求，做个抽奖的按钮，

抽奖规则：

30%的几率中奖，中奖会提示恭喜恭喜，奖品为10万 RMB 劳斯莱斯优惠券，没中奖会提示再接再厉。

2、先搭界面：

<view class="title">抽奖规则：</view>
<view class="content">30%的几率中奖，中奖会提示恭喜恭喜，奖品为10万 RMB 劳斯莱斯优惠券，没中奖会提示再接再厉。</view>
<button class="btn" bind:tap="prizeDraw">开始抽奖</button>

3、css文件

page {height: 100vh;display: flex;flex-direction: column;justify-content: center;
}
.btn{margin-top: 50rpx;color: black;border: 1px solid black;
}.title{margin: 10rpx 40rpx;font-size: 50rpx;font-weight: 550;
}.content{margin: 20rpx 80rpx;font-size: 40rpx;
}

3、实现prizeDraw函数。

prizeDraw(){const p = new Promise((resolve,reject) => {setTimeout(() => {let n = Math.floor(Math.random()*100)+1;if (n <= 30) {resolve();} else {reject();}}, 1000);});p.then(() => {wx.showModal({title: '恭喜恭喜',content: '奖品为 10 万 RMB 劳斯莱斯优惠券',showCancel: false, // 隐藏取消按钮confirmText: '我知道了',});},() => {wx.showModal({title: '没抽中',content: '再接再厉',showCancel: false, // 隐藏取消按钮confirmText: '我知道了',});});}

代码说明：

a、const p = new Promise(） ; //生成Promise对象。

b、里面有个参数，是函数，写法() => {}

c、函数里面有两个方法，resolve（解决）和reject（拒绝），函数里面的逻辑结果成功就调用resolve，失败就调用reject 。

d、然后运行Promise对象的then函数。

e、then里面带两个函数参数。

f、第一个用来执行成功的后续步骤，比如弹框之类，第二个用来执行失败的后续步骤