利用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最新版下测试):

See the Pen Promise.all的应用实例 by wenjie (@wenjie) on CodePen.

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

时间: 2024-11-08 17:25:51

利用ES6的Promise.all实现至少请求多长时间的相关文章

js利用递归与promise 按顺序请求数据

问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行? 方案:我们可以将promise变成下一个请求,可以利用递归来实现 实施: //定义初始数据 requestlist就像tabBar列表 let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9]; //每个tabBar的返回数据使用reslist装起来 let reslist =

ES6之Promise用法详解

一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what.那么什么是Promise呢? 以下是MDN对Promise的定义 The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that

浅谈ES6原生Promise

浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔问题的出现.不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解. 举例如下

es5实现promise,多异步请求返回数据

最近研究es6的promise觉得非常好用,还有jquery的 $.Deferred().node里面的Q模块,都研究了一遍,于是自己用es5写了一个类似的promise功能 首先模块代码 1 var Q = {}; 2 Q.deffer = function() { 3 var fn = {}; 4 var resolve = null; 5 var reject = null; 6 var done = null; 7 var promis = { 8 then: function(reso

利用java servlet实现简单的web请求过滤和跳转

今日有两个微信web项目合并了,但是还有些链接指向废弃的项目,另外不想在服务器上运行两份相同web项目(1.影响性能.2.维护升级容易出错),因此决定写一个简单链接跳转的项目,spring的filter过滤器可以实现,但想想spring干这个有点大材小用,想到java的servlet可以支持通配符,因此用servlet写了一个简单的跳转程序,总共花了不到一小时的时间.废话少说上代码: 1 /** 2 * Servlet implementation class Default 3 */ 4 @W

利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>proxy</title> </hea

使用CURL检测Clinet侧发起的HTTP请求各阶段时间

前言 上周,我方的一个客户反馈,访问我们的接口,平均耗时在2s以上.但是我方对请求进入,和请求返回,整个过程都有监控,我方的耗时基本在50ms以内,非常快. 后来了解到,客户从广东访问到我方上海,公网来访问我方.那么就建议去检测,DNS耗时,TCP建立的耗时等.理论上,长距离的公网,网络延迟就非常高.遂建议使用CURL去检查.结果果然如猜想,在TCP建立的耗时就很久. 进入正题,这篇文章主要介绍使用CURL检测Client端发起的HTTP请求,各个阶段的时间. 第一.HTTP请求的过程介绍 一个

[Swift 工作tips] 之 使用Alamofire做网络请求时设置请求超时(timeout)时间

在应用开发过程中,经常需要网络请求,在网络请求的过程中,一般的第三方网络框架的超时时间比较长为15秒: 那么,我们如何来指定请求的超时时间呢? 在Swift的世界里,比较有名的网络是Alamofire   GitHut地址:https://github.com/Alamofire/Alamofire 那么,在使用Alamofire 的时候,设置Alamofire的请求时间如下: 本例代码如下: 1 var alamofireManager : Manager? 2 // 设置请求的超时时间 3

请求更多后台时间-陈棚

假如应用程序正在知心文件下载或者文件传输等,当应用进入后台时,如果该任务还没有执行王成,应用转入后提啊后,该任务就会被暂停.千万不要强制在applicationDidenterBackGround:方法中直接完成改任务--因为这回导致应用进入后台花费太多时间,iOS系统可能直接从内存中删除改应用.正确的做法是,以applicationDidEnterBackground:方法为瓶盖,告诉系统进入后台后还有更多的任务需要完成,从而向系统申请更多的后台时间.在这种方式下,当我们的应用处于后台时,即使