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有顺序关系的,比如先检测这个人是否还有机会打开红包,然后再请求打开红包获得随机红包金额 。

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

  1. 【前端开发】】ES6属性promise封装js动画

    如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...

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

    问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行? 方案:我们 ...

  3. ES6之Promise用法详解

    一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...

  4. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  5. 关于ES6的Promise的使用深入理解

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  6. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  7. ES6中promise总结

    一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...

  8. ES6新增"Promise"可避免回调地狱

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  9. 解读Es6之 promise

            单线程:  在同一时间只能有同一任务进行.JavaScript就是一门单线程语言                 当有多个任务需要进行时,则需要进行排队,前一个执行完毕才能执行下一个; ...

随机推荐

  1. SXOI2018游记

    day0 动身去太原.太原五中虽然挺小的但是很好看啊qwq(进门口一个"通天堂"(逃 试机.似乎看到了__stdcall!!然而没敢去认orz.linux选手似乎是9个.准考证(一 ...

  2. mac 安装php redis扩展

    git clone git://github.com/nicolasff/phpredis.git cd ./phpredis phpize 如果报 Cannot find autoconf. Ple ...

  3. Kotlin 0

    #0 下载与配置: 官网上写的很详细,不再重复. #1 Hello world fun main(args: Array<String>) { println("Hello, w ...

  4. 用travis-ci编译android版nodejs

    第一步: fork 第二步: 添加.travis.yml 在repository根目录添加.travis.yml文件,在其中添加以下内容. language: c before_install: - ...

  5. 「日常训练」「小专题·图论」Domino Effect(1-5)

    题意 分析 这题几乎就是一条dijkstra的问题.但是,如何考虑倒在中间? 要意识到这题求什么:单源最短路的最大值.那么有没有更大的?倒在中间有可能会使它更大. 但是要注意一个问题:不要把不存在的边 ...

  6. 并查集——poj1308(并查集延伸)

    题目链接:Is It A Tree? 题意:给你一系列形如u v的点对(u v代表一条由u指向v的有向边),请问由给你的点构成的图是不是一棵树? 树的特征:①每个节点(除了根结点)只有一个入度:②只有 ...

  7. 【转】hexo博客图片问题

    1.首先确认_config.yml 中有 post_asset_folder:true. Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder 当您设置post_as ...

  8. 自定义Json格式

    老铁们都知道,一般的json格式就是键值对格式,在一些特定的框架或者系统中,会用到自定义格式的json文件,假设我们要得到的特定格式json格式如下: {"A":"2&q ...

  9. Spring框架(依赖注入)

    特点 1轻量级和侵入性低 2依赖注入和面向接口实现松耦合 3面向切面编程 减少样式代码 专有名词: 1依赖注入:对象无需自行管理依赖关系.通过系统负责协调在创建对象的第三方组件的设定,实现依赖关系自动 ...

  10. lintcode-64-合并排序数组 II

    64-合并排序数组 II 合并两个排序的整数数组A和B变成一个新的数组. 注意事项 你可以假设A具有足够的空间(A数组的大小大于或等于m+n)去添加B中的元素. 样例 给出 A = [1, 2, 3, ...