利用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最新版下测试)：
/ 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实现至少请求多长时间的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用typescript封装axios的实例代码，为了方便，在vue3的配置里面按需加载element-plus，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了JAVA四种基本排序方法,较为详细的总结分析了插入法、冒泡法、选择法及Shell排序等四种常用的排序技巧,非常具有实用价值,需要的朋友可以参考下2015-07-07
js修改input的type属性有些限制,今天遇到个问题一开始的时候，input的类型是text，后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行，所以只能换个思路感兴趣的朋友可以了解下2013-01-01
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。2011-09-09
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享，需要的朋友可以参考一下2013-06-06
uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发小程序的开发规范,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
在Javascript里访问SharePoint列表数据的实现方法
在进行SharePoint订制的时候经常会遇到开发手段受限制的问题，比如通常公司都会限制服务器的访问以及部署，很多开发都只能够在客户端来进行2011-05-05
这篇文章主要介绍了JS数组Object.keys()方法的使用,结合实例形式分析了javascript使用Object.keys()方法进行数组遍历、读取相关操作技巧,需要的朋友可以参考下2019-06-06
在业务中,由于项目采用微前端架构,需要通过A应用的某个值的变化对B应用中的DOM进行改变（如弹出一个Modal）,第一个想到的可能是发布订阅模式,其实不如将问题缩小化,采用原生的能力去解决,本文介绍了两种方法来使用JS监听一个变量改变,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了Array对象去除重复项的相关资料，文中通过示例代码详细介绍了在ES5和ES6中Array对象去除重复项的方法，需要的朋友可以参考借鉴，下面来一起看看吧。2017-04-04
最新评论