我们来尝试使用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、第一个用来执行成功的后续步骤,比如弹框之类,第二个用来执行失败的后续步骤