快捷導(dǎo)航

利用ES6的Promise.all實(shí)現(xiàn)至少請(qǐng)求多長(zhǎng)時(shí)間的實(shí)例

更新時(shí)間：2017年08月28日 07:44:08 投稿：jingxian

下面小編就為大家?guī)?lái)一篇利用ES6的Promise.all實(shí)現(xiàn)至少請(qǐng)求多長(zhǎng)時(shí)間的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、背景

我們都知道ajax請(qǐng)求可以加個(gè)timeout，就是最多請(qǐng)求多少時(shí)間，如果超過(guò)這個(gè)時(shí)間直接就報(bào)錯(cuò)。這個(gè)是最多請(qǐng)求多長(zhǎng)時(shí)間，我現(xiàn)在要做的是，最少要請(qǐng)求多長(zhǎng)時(shí)間，然后才能執(zhí)行后續(xù)的邏輯。

比如，一個(gè)ajax請(qǐng)求 x 毫秒就執(zhí)行完畢了，但我要讓他至少執(zhí)行1秒鐘，那我們會(huì)這么想： ajax完成后， 1. 如果x<1s, 那我們先setTimeout => 1s - x ，然后執(zhí)行后續(xù)操作。 2 如果x>=1s, 那我們直接執(zhí)行后續(xù)操作。想想這可繁瑣了，我們還要在前面記錄一下開(kāi)始時(shí)間，后面記錄一下結(jié)束時(shí)間，然后才能得到x。。。。

或者變量flag，ajax里面完成設(shè)置flag，setTimeout里面完成也設(shè)置flag等等等方法，都很繁瑣、

2、Solution

現(xiàn)在ES6有個(gè)Promise.all，非常適合解決此類問(wèn)題。直接這樣 Promise.all([ajaxPromise(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。

如果說(shuō)是多個(gè)ajax（promise）按順序執(zhí)行，但總共加起來(lái)的時(shí)間至少是1s呢？那就用一個(gè)Promise把多個(gè)ajax包起來(lái)。然后 Promise.all([ajaxPromiseAll(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。

3、講得很抽象，實(shí)例為證

這個(gè)實(shí)例是這樣的，微信里面有拆紅包，當(dāng)我們點(diǎn)擊開(kāi) 的時(shí)候，那個(gè)字至少會(huì)完整的翻一翻。那個(gè)完整翻一翻的時(shí)間我們假定需要1秒鐘。如果我們直接點(diǎn)擊開(kāi)的時(shí)候，立即請(qǐng)求ajax，等ajax完成立即拆開(kāi)紅包，這里的時(shí)間有可能不足1s，那就不能做到完整翻一翻。如果請(qǐng)求大于1s，那就讓它一直翻轉(zhuǎn)吧，直到完成請(qǐng)求。所以我們?yōu)榱私鉀Q這個(gè)問(wèn)題，就需要用到上面的技術(shù)。

參考代碼如下(Chrome最新版下測(cè)試)：

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

因?yàn)閍sync和await使用起來(lái)比Promise爽，所以我采用了這兩個(gè)語(yǔ)法糖來(lái)寫(xiě)，用setTimeout來(lái)模擬ajax請(qǐng)求, ajax模擬A和 ajax模擬B有順序關(guān)系的，比如先檢測(cè)這個(gè)人是否還有機(jī)會(huì)打開(kāi)紅包，然后再請(qǐng)求打開(kāi)紅包獲得隨機(jī)紅包金額。

以上這篇利用ES6的Promise.all實(shí)現(xiàn)至少請(qǐng)求多長(zhǎng)時(shí)間的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: