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


Posted in Javascript onAugust 28, 2017

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模拟A
const 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实现至少请求多长时间的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 #Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 #Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 #Javascript
vue下跨域设置的相关介绍
Aug 26 #Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 #Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 #Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
countUp.js实现数字滚动效果
2019/10/18 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
VSCode搭建Vue项目的方法
2020/04/30 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
python回调函数的使用方法
2014/01/23 Python
python脚本实现验证码识别
2018/06/07 Python
python实现支付宝转账接口
2019/05/07 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python 魔法函数实例及解析
2019/09/25 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
营销总经理岗位职责范本
2014/09/02 职场文书
民事赔偿协议书
2014/11/02 职场文书
2014年民政工作总结
2014/11/26 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
初中班长竞选稿
2015/11/20 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang