利用ES6的Promise.all實現至少請求多長時間

一、背景

咱們都知道ajax請求能夠加個timeout，就是最多請求多少時間，若是超過這個時間直接就報錯。 這個是最多請求多長時間，我如今要作的是，最少要請求多長時間，而後才能執行後續的邏輯。

好比，一個ajax請求 x 毫秒就執行完畢了，但我要讓他至少執行1秒鐘，那咱們會這麼想： ajax完成後 ， 1. 若是x<1s, 那咱們先setTimeout => 1s - x ，而後執行後續操做。 2 若是x>=1s, 那咱們直接執行後續操做。 想一想這可繁瑣了，咱們還要在前面記錄一下開始時間，後面記錄一下結束時間，而後才能獲得x。。。。

或者變量flag，ajax裏面完成設置flag，setTimeout裏面完成也設置flag等等等方法，都很繁瑣、

二、Solution

如今ES6有個Promise.all，很是適合解決此類問題。直接這樣 Promise.all([ajaxPromise(), waitPromise(1s)]).then(()=> 至少執行了1s) 。。。

若是說是 多個ajax（promise）按順序執行，但總共加起來的時間至少是1s呢？ 那就用一個Promise把多個ajax包起來。而後 Promise.all([ajaxPromiseAll(), waitPromise(1s)]).then(()=> 至少執行了1s) 。。。

三、 講得很抽象，實例爲證

這個實例是這樣的，微信裏面有拆紅包，當咱們點擊 開 的時候，那個字至少會完整的 翻一翻。那個完整翻一翻的時間咱們假定須要1秒鐘。 若是咱們直接點擊開的時候，當即請求ajax，等ajax完成當即拆開紅包，這裏的時間 有可能不足1s，那 就不能作到完整翻一翻。 若是請求大於1s，那就讓它一直翻轉吧，直到完成請求。因此咱們爲了解決這個問題，就須要用到上面的技術。

參考代碼以下(Chrome最新版下測試)：

See the Pen Promise.all的應用實例 by wenjie (@wenjie) on CodePen.

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