利用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最新版下測試)：

See the PenPromise.all的應用實例by wenjie (@wenjie) onCodePen.

因為async和await使用起來比Promise爽，所以我採用了這兩個語法糖來寫，用setTimeout來模擬ajax請求, ajax模擬A和 ajax模擬B有順序關係的，比如先檢測這個人是否還有機會打開紅包，然後再請求打開紅包獲得隨機紅包金額 。

中公優就業IT培訓，總有你想學的：http://xue.ujiuye.com

勤工儉學計劃，0元學IT!

http://www.ujiuye.com/zt/qgjx/?wt.bd=mmxtt

找工作太難?好漢，讓我助你一臂之力!

http://www.ujiuye.com/zt/jyfc/?wt.bd=mmxtt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！