利用ES6 Promise.all实现接口请求的最短时间限制

背景与问题描述

1、背景

在Web开发中，我们通常使用Ajax请求的timeout属性来限制最大请求时长，即超过指定时间则报错。然而，某些场景下我们需要的是“最小请求时长”，即确保请求至少执行一段时间后再进行后续逻辑处理。

例如，一个ajax请求 x 毫秒就执行完毕了，但我要让他至少执行1秒钟，那我们会这么想： ajax完成后 ， 1. 如果x<1s, 那我们先setTimeout => 1s - x ，然后执行后续操作。 2 如果x>=1s, 那我们直接执行后续操作。 想想这可繁琐了，我们还要在前面记录一下开始时间，后面记录一下结束时间，然后才能得到x。。。。

另一种常见做法是使用标志位（flag），在Ajax回调中设置flag，在setTimeout中也设置flag，通过轮询或判断flag状态来执行后续操作。这种方式代码冗余且容易出错。

基于Promise.all的解决方案

2、Solution

ES6提供的Promise.all方法非常适合解决此类问题。我们可以将业务请求的Promise与一个等待指定时间的Promise组合在一起：Promise.all([ajaxPromise(), waitPromise(1s)])。这样，无论ajaxPromise执行多快，整个Promise链都会等待waitPromise完成（即至少1秒）后，再执行后续的then回调。

如果有多个Ajax请求需要按顺序执行，但要求这些请求的总耗时至少为1秒，可以先将多个Ajax请求封装在一个Promise中（例如使用async/await或链式调用），然后再与waitPromise(1s)一起放入Promise.all中。这样可确保所有业务逻辑执行完毕后，若总时长不足1秒，仍会等待至1秒才继续。

微信红包实例分析

3、 讲得很抽象，实例为证

以微信红包为例，当用户点击“开”按钮时，红包封面翻转动画至少需要完整展示1秒钟。如果直接发起Ajax请求获取红包数据，并在请求完成后立即播放动画，当网络较快、请求耗时不足1秒时，动画可能无法完整播放。若请求耗时超过1秒，则动画会一直播放直到请求结束。为解决此体验问题，需确保“开红包”动作至少持续1秒，此时可应用上述Promise.all技术。

代码实现参考

参考代码如下(Chrome最新版下测试)：

/ ajax模拟A
const funcA = async () =>
 new Promise(resovel => {
  setTimeout(() => {
   console.log("done A");
   resovel("func A");
  }, 400);
 });

为了代码简洁，本文采用async/await语法糖，并使用setTimeout模拟Ajax请求。示例中包含两个模拟请求：ajax模拟A和ajax模拟B，二者存在顺序依赖，例如先检查用户是否有资格领取红包，再请求获取随机金额。

以上这篇利用ES6的Promise.all实现至少请求多长时间的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。