利用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 相关文章推荐
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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和ACCESS写聊天室(一)
2006/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
C#公司笔试题
2014/03/28 面试题
社区庆八一活动方案
2014/02/02 职场文书
安全标准化实施方案
2014/02/20 职场文书
房产公证书范本
2014/04/10 职场文书
导师工作推荐信范文
2014/05/17 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
护理实习生带教计划
2015/01/16 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Nginx 常用配置
2022/05/15 Servers