00:00
Hello,大家好,上一个小节我们对promise呢做了个介绍啊,这个小节我们来对promise进行一个体验,看看他在异步任务当中到底是如何来使用的。我们这里呢,有一个案例,我们来做一下。是当我们点击需求是这样子的啊,当我们在点完这个按钮之后。等两秒钟。啊,为什么等两秒呢,这是因为呢,其实正常的抽奖它也不是在前端啊进行运算的,还要把这个请求呢发给服务器,我们就用一个定时器呢来模拟这个请求啊,所以做一个两秒的一个延两秒的一个延时。然后两秒钟之后呢,然后告知我到底有没有中奖,我们中奖概率的话定为30%啊。30%的中奖概率,如果说我要是中奖了,那就在页面当中呢,做一个弹框。告诉我,哎呀,恭喜恭喜啊,然后呢,中奖了,如果说没有中奖的话,就弹出一个再接再厉。
01:02
是这样的一个需求。我们当然这块的话,我已经把需求的一些文字内容呢,我已经写在这了啊,看这点击按钮两秒后显示是否中奖,30%概率中奖。好,那么现在的话,我们开始来做一个实现,我们先不用promise,就单纯的用之前的内容和知识点来去实现它。首先第一点我们肯定要先获取这个元素,写上注释,获取元素对象。BTN等于一个document。document.query select。把BTN放进来。下边一步肯定要绑定事件,因为单击之后才要抽奖,所以说绑定单击事件。好B tn.ADD event listener,事件类型为click。第二个是咱们的时间程序。那么在这的话,我们首先要先完成第一个事情,就是30%这个中奖概率,我们该怎么去实现啊,这个原理原理呢很简单,我们可以呢,从一到100之间随机取一个数字。
02:11
那么这一个数字它的中奖概率就是,比方说举个例子啊,它出现一的概率为1%,出现二的概率为1%,出现三的概率也为1%,那么出现数字为一或为二或为三的概率为3%。就是它只要在这其中的啊概率为3%,那我们可以把这个值设到30。那如果说他要是小于等于30的话,就恭喜你中奖了。啊,反之就是没有中奖。这就是他中奖概率的一个简易的算法,好在这的话,随机数的生成我已经把函数呢写好了,所以说这个东西就不需要大家再去做了啊,我们来获取。这个从一到100。
03:01
的一个随机数。Let n等于RAN1逗号100。生成完之后呢,咱们开始进行判断,当然我忘了做一个事情,就是要加定时器。啊,Set timeout。咱们的两秒钟,咱们稍微缩短点啊,来个一秒钟。其实都差不多啊,这样的话还能更快一点。把代码往前推进一下。把这个呢改一改。好,然后呢,判断这块,如果说这个N呢,要是小于等于了30,恭喜你中奖了啊,中奖之后呢,来弹框alert一个恭喜恭喜是吧,奖品为10万元劳斯劳斯劳斯莱斯优惠券。然后如果说呢,要是没有中奖呢,你就alert一个再接再厉。好,我们先来看看效果怎么样,点开浏览器。点击一秒钟。
04:00
哎呀,没中奖,哎呀运气不好。再来一次呀,又没中奖,能不能让我中一次?再来一次。痒。上头了,我有点。中奖了,终于中奖了,那那中奖之后呢,证明咱们这个代码写的是没有问题的,接下来我们开始去用promise进行封装,哎,用promise的一个形式。来实现。把这个代码呢,首先我们先折起来。那首先我们说了啊,Promise是个什么东西来着,它是一个构造函数,既然是构造函数的话,它可以进行对象的实例化,所以说我们可以这样子来用。啊,而promise呢,在实例化的时候呢,需要接受一个参数,这个参数呢,还是一个函数类型的值。注意啊,它实例化需要接收一个参数,这个参数是一个函数类型的值,而且呢,这个函数还有两个形参。
05:05
分别叫resolve和reject,当然了,你写A和B也行啊,这就是潜规则啊,就是常规,咱们潜规则是把它称为resolve和reject。那么resolve单词本身为解决的意思,而reject这个单词呢?本身为拒绝的意思。啊,拒绝的意思。拒绝。那么什么时候去调resolve呢?就是当这个异步任务成功的时候呀,忘了说一个事儿,就是resolve和reject这两个东西都是函数类型的数据。啊,是函数类型的数据,那么什么时候去调它呢?就是当异步任务在成功的时候调resolve,当异步任务在失败的时候就reject。那好,我们接下来呢,在这就可以去写异步的任务了,那咱们在介绍的时候说了啊,这个promise对象可以干嘛来着,它可以包裹一个异步操作。
06:09
啊,可以包裹一个异步操作,所以说咱们接下来把异步操作代码放进来。好,往前推一推。放进来之后成功调resolve,失败掉,Reject什么时候成功?当这个值小于等于30的时候。成功,好,我们在这调一下resolve,什么时候失败,Else这块失败reject。那这样一来就完成了对异步任务的一个封装,那封装完毕之后咱就完成了吗?并没有,我们还要对这个成功和失败之后的一个。啊,需求去做一个实现成功得输出的是这个,失败得输出的是这个,那我在哪去进行这些内容的输出呢?我们需要去调用另外一个方法。
07:03
Z方法。Z方法呢,也是这个对象上的一个方法,这个方法呢,它执行时需要接收两个参数。而且呢,两个参数都是函数类型的值。啊,我这里为了方便啊,就写成了箭头函数。那么指定这两个函数它干什么呢?第一个函数是对象成功时的回调。第二个参数是对象失败时的回调。咱刚才说了,这个resolve呢是成功的时候掉,Reject呢是失败的时候掉,而且呢,这个resolve有一个特点是它。调完之后,可以将promise对象的状态设置为成功。咱说了可以把promise对象状态设置为成功,Promise对象是谁呢?就是这个P。
08:02
所以resolve可以将P的状态改为成功,那么下边这个呢,相反。可以将promise对象状态呢设置为失败。好,那么下边呢,p.Z方法,咱们说用来指定回调,第一个回调是对象状态为成功时的回调,而第二个回调为对象状态失败的回调,也就是说如果你成功就执行第一个回调函数,如果说你要是失败的,就执行第二个回调函数。好,接下来我来输出一个内容。啊,根据。咱们的结果状态来去输出不同的内容。我把这个拿过来。好放到这里边儿。当然,我们不使用cons啊,我们使用alert。这个位置呢,也是一样子,再接再厉。好了,一起来看看结果怎么样。打开。然后呢,刷新一下,点击一秒钟。
09:03
还是没有中奖,再来。还是没有再来。好了,中奖了啊。这是当前呢,我们对promise呢做了一个使用啊,再来回看一下,它其实使用起来还是比较简单的啊,语法结构,首先它的参数是一个函数类型的参数,在里边呢包裹一个异步操作,如果成功则叫resolve,如果失败则调reject。啊,他们两个可以修改promise之间的状态,然后呢,下边通过Z方法去指定成功和失败时的回调,如果成功就执行第一个回调函数,如果说我要是失败了,就执行第二个回调函数。好了,这个小节,关于promise的这个初体验,我们就先到这。
我来说两句