利用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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
Vue实现购物车功能
Apr 27 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
layui的select联动实现代码
Sep 28 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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中session退出登陆问题
2014/02/27 PHP
php生成圆角图片的方法
2015/04/07 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
实例讲解python函数式编程
2014/06/09 Python
Python实现CET查分的方法
2015/03/10 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
财务管理专业推荐信
2013/11/19 职场文书
实习单位接收函
2014/01/11 职场文书
小学生自我评价范文
2014/01/25 职场文书
鉴史问廉观后感
2015/06/10 职场文书
四年级作文之植物
2019/09/20 职场文书
导游词之凤凰古城
2019/10/22 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电