利用ES6的Promise.all實現(xiàn)至少請求多長時間的實例
1、背景
我們都知道ajax請求可以加個timeout,就是最多請求多少時間,如果超過這個時間直接就報錯。 這個是最多請求多長時間,我現(xiàn)在要做的是,最少要請求多長時間,然后才能執(zhí)行后續(xù)的邏輯。
比如,一個ajax請求 x 毫秒就執(zhí)行完畢了,但我要讓他至少執(zhí)行1秒鐘,那我們會這么想: ajax完成后 , 1. 如果x<1s, 那我們先setTimeout => 1s - x ,然后執(zhí)行后續(xù)操作。 2 如果x>=1s, 那我們直接執(zhí)行后續(xù)操作。 想想這可繁瑣了,我們還要在前面記錄一下開始時間,后面記錄一下結束時間,然后才能得到x。。。。
或者變量flag,ajax里面完成設置flag,setTimeout里面完成也設置flag等等等方法,都很繁瑣、
2、Solution
現(xiàn)在ES6有個Promise.all,非常適合解決此類問題。直接這樣 Promise.all([ajaxPromise(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。
如果說是 多個ajax(promise)按順序執(zhí)行,但總共加起來的時間至少是1s呢? 那就用一個Promise把多個ajax包起來。然后 Promise.all([ajaxPromiseAll(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。
3、 講得很抽象,實例為證
這個實例是這樣的,微信里面有拆紅包,當我們點擊 開 的時候,那個字至少會完整的 翻一翻。那個完整翻一翻的時間我們假定需要1秒鐘。 如果我們直接點擊開的時候,立即請求ajax,等ajax完成立即拆開紅包,這里的時間 有可能不足1s,那 就不能做到完整翻一翻。 如果請求大于1s,那就讓它一直翻轉(zhuǎn)吧,直到完成請求。所以我們?yōu)榱私鉀Q這個問題,就需要用到上面的技術。
參考代碼如下(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實現(xiàn)至少請求多長時間的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享
基于OO的動畫附加插件,可以實現(xiàn)彈跳、漸隱等動畫效果 分享,需要的朋友可以參考一下2013-06-06
uniapp開發(fā)小程序的開發(fā)規(guī)范總結
uni-app 是一個使用 vue.js 開發(fā)跨平臺應用的前端框架,下面這篇文章主要給大家介紹了關于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
在Javascript里訪問SharePoint列表數(shù)據(jù)的實現(xiàn)方法
在進行SharePoint訂制的時候經(jīng)常會遇到開發(fā)手段受限制的問題,比如通常公司都會限制服務器的訪問以及部署,很多開發(fā)都只能夠在客戶端來進行2011-05-05

