当前位置:首页 > 日记 > 正文

利用ES6的Promise.all实现至少请求多长时间的实例

利用ES6的Promise.all实现至少请求多长时间的实例

1、背景

我们都知道ajax请求可以加个timeout,就是最多请求多少时间,如果超过这个时间直接就报错。 这个是最多请求多长时间,我现在要做的是,最少要请求多长时间,然后才能执行后续的逻辑。

比如,一个ajax请求 x 毫秒就执行完毕了,但我要让他至少执行1秒钟,那我们会这么想: ajax完成后 , 1. 如果x<1s, 那我们先setTimeout => 1s - x ,然后执行后续操作。 2 如果x>=1s, 那我们直接执行后续操作。 想想这可繁琐了,我们还要在前面记录一下开始时间,后面记录一下结束时间,然后才能得到x。。。。

或者变量flag,ajax里面完成设置flag,setTimeout里面完成也设置flag等等等方法,都很繁琐、

2、Solution

现在ES6有个Promise.all,非常适合解决此类问题。直接这样 Promise.all([ajaxPromise(), waitPromise(1s)]).then(()=> 至少执行了1s) 。。。

如果说是 多个ajax(promise)按顺序执行,但总共加起来的时间至少是1s呢? 那就用一个Promise把多个ajax包起来。然后 Promise.all([ajaxPromiseAll(), waitPromise(1s)]).then(()=> 至少执行了1s) 。。。

3、 讲得很抽象,实例为证

这个实例是这样的,微信里面有拆红包,当我们点击 開 的时候,那个字至少会完整的 翻一翻。那个完整翻一翻的时间我们假定需要1秒钟。 如果我们直接点击开的时候,立即请求ajax,等ajax完成立即拆开红包,这里的时间 有可能不足1s,那 就不能做到完整翻一翻。 如果请求大于1s,那就让它一直翻转吧,直到完成请求。所以我们为了解决这个问题,就需要用到上面的技术。

参考代码如下(Chrome最新版下测试):

/ ajax模拟Aconst funcA = async () => new Promise(resovel => {  setTimeout(() => {   console.log("done A");   resovel("func A");  }, 400); });

因为async和await使用起来比Promise爽,所以我采用了这两个语法糖来写,用setTimeout来模拟ajax请求, ajax模拟A和 ajax模拟B有顺序关系的,比如先检测这个人是否还有机会打开红包,然后再请求打开红包获得随机红包金额 。

以上这篇利用ES6的Promise.all实现至少请求多长时间的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

Excel怎么做减法运算Excel做减法运

Excel怎么做减法运算Excel做减法运

运算,方法,步骤,减法,怎么做,  我们经常使用Excel进行各类运算,可是我们发现软件自身是没有减法运算的函数,那遇到减法运算的时候怎么使用Excel进行运算呢?今天就来跟大家分享Excel做减法运算的方法,希望对你有帮助!Excel做减法运算的步骤打…

ps怎样制作一张透明背景的人物签名

ps怎样制作一张透明背景的人物签名

透明背景,人物,电脑软件,ps,ps怎样制作一张透明背景的人物签名?运用PHOTOSHOP软件,可以很简单的制作大家想要的照片,下面和小编一起来看看具体步骤吧。最终效果具体步骤:第一步把自己的签名拍成照片传到电脑中保存。然后在Photoshop中打开签名…

qq安全中心申请解冻教程

qq安全中心申请解冻教程

安全中心,方法,教程,电脑软件,qq,  当你的Q中病毒后恶意给好友发的垃圾信息,别人会举报你的Q,一旦超过3个举报,TX会把你的Q直接冻结,那么冻结后我们要怎么解冻了?今天小编给你分享一下qq安全中心申请解冻的方法,欢迎阅读。qq安全中心申请解冻…

怎么在ppt中使用公式编辑器ppt中使

怎么在ppt中使用公式编辑器ppt中使

公式编辑器,方法,数学公式,电脑软件,ppt,  使用PPT的一系列操作看起来很简单,真正自己制作起来却经历了不少挑战;公式编辑器都是可以直接在菜单里面调用的。下面小编就教你怎么在ppt中使用公式编辑器。希望对你有帮助!ppt中使用公式编辑器…

wps文字怎么设置页面布局

wps文字怎么设置页面布局

文字,布局,设置,页面布局,方法,  掌握wps文字布局页面的方法,对我们今后处理文档是很有帮助的。对于新手来说还是有一定难度,怎么办?下面就让小编告诉你wps文字如何布局页面,欢迎大家来到学习。wps文字布局页面的方法1、点击WPS文字边上的箭…

Excel2010简单扇形统计图怎么制作

Excel2010简单扇形统计图怎么制作

扇形,简单,统计图,电脑软件,  在统计数据中,扇形统计图主要通过所占扇面的大小,即圆心角的大小,来表示每个数据所占的总体比重,用扇形统计图一目了然。以下是小编为您带来的关于Excel2010简单扇形统计图的制作,希望对您有所帮助。Excel2010简…

qq学生搞笑个性签名

qq学生搞笑个性签名

个性签名,搞笑,学生,大全,电脑软件,  一句搞笑个性签名:&ldquo;你牵过男生的手吗&rdquo; &ldquo;掰手腕&rdquo; &ldquo;那你挽过男生的胳膊吗&rdquo; &ldquo;过肩摔&rdquo;。下面小编给大家分享了关于qq学生搞笑个性签名,希望你喜欢。qq学…

excel中文乱码的解决教程

excel中文乱码的解决教程

教程,中文乱码,电脑软件,excel,  Excel文档经常会遇到打开出现中文乱码的问题,具体该如何解决中文乱码的问题呢?下面是小编带来的关于excel中文乱码的解决教程,希望阅读过后对你有所启发!excel中文乱码的解决教程:  乱码解决步骤1:处理前的…

缩放Word2016文档内容的方法有哪些

缩放Word2016文档内容的方法有哪些

方法,文档,缩放,内容,有哪些,  在查看或编辑Word文档时,放大文档能够更方便地查看文档内容,缩小文档可以在一屏内显示更多内容。Word文档的放大和缩小可以通过调整文档的显示比例实现。以下是小编为您带来的关于缩放Word2016文档内容的方法…

jQuery实现页面倒计时并刷新效果

jQuery实现页面倒计时并刷新效果

刷新,倒计时,效果,页面,电脑软件,下面一段代码给大家分享基于jquery实现的页面倒计时并刷新效果,代码如下所示:var intDiff = parseInt(600);//倒计时总秒数量 function timer(intDiff){ window.setInterval(function(){ var da…

AngularJS中$http使用的简单介绍

AngularJS中$http使用的简单介绍

简单,电脑软件,AngularJS,http,在AngularJS中主要使用$http服务与远程http服务器交互,其作用类似于jquery中的$.ajax服务:$http是AngularJS的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互; 与$.ajax相…

Bootstrap3下拉菜单的实现

Bootstrap3下拉菜单的实现

下拉菜单,电脑软件,使用方法通过data属性<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger <span class="caret"></span…