利用ES6的Promise.all實(shí)現(xiàn)至少請(qǐng)求多長時(shí)間的實(shí)例
1、背景
我們都知道ajax請(qǐng)求可以加個(gè)timeout,就是最多請(qǐng)求多少時(shí)間,如果超過這個(gè)時(shí)間直接就報(bào)錯(cuò)。 這個(gè)是最多請(qǐng)求多長時(shí)間,我現(xiàn)在要做的是,最少要請(qǐ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ù)操作。 想想這可繁瑣了,我們還要在前面記錄一下開始時(shí)間,后面記錄一下結(jié)束時(shí)間,然后才能得到x。。。。
或者變量flag,ajax里面完成設(shè)置flag,setTimeout里面完成也設(shè)置flag等等等方法,都很繁瑣、
2、Solution
現(xiàn)在ES6有個(gè)Promise.all,非常適合解決此類問題。直接這樣 Promise.all([ajaxPromise(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。
如果說是 多個(gè)ajax(promise)按順序執(zhí)行,但總共加起來的時(shí)間至少是1s呢? 那就用一個(gè)Promise把多個(gè)ajax包起來。然后 Promise.all([ajaxPromiseAll(), waitPromise(1s)]).then(()=> 至少執(zhí)行了1s) 。。。
3、 講得很抽象,實(shí)例為證
這個(gè)實(shí)例是這樣的,微信里面有拆紅包,當(dāng)我們點(diǎn)擊 開 的時(shí)候,那個(gè)字至少會(huì)完整的 翻一翻。那個(gè)完整翻一翻的時(shí)間我們假定需要1秒鐘。 如果我們直接點(diǎn)擊開的時(shí)候,立即請(qǐng)求ajax,等ajax完成立即拆開紅包,這里的時(shí)間 有可能不足1s,那 就不能做到完整翻一翻。 如果請(qǐng)求大于1s,那就讓它一直翻轉(zhuǎn)吧,直到完成請(qǐng)求。所以我們?yōu)榱私鉀Q這個(gè)問題,就需要用到上面的技術(shù)。
參考代碼如下(Chrome最新版下測試):
/ ajax模擬A const funcA = async () => new Promise(resovel => { setTimeout(() => { console.log("done A"); resovel("func A"); }, 400); });
因?yàn)閍sync和await使用起來比Promise爽,所以我采用了這兩個(gè)語法糖來寫,用setTimeout來模擬ajax請(qǐng)求, ajax模擬A和 ajax模擬B有順序關(guān)系的,比如先檢測這個(gè)人是否還有機(jī)會(huì)打開紅包,然后再請(qǐng)求打開紅包獲得隨機(jī)紅包金額 。
以上這篇利用ES6的Promise.all實(shí)現(xiàn)至少請(qǐng)求多長時(shí)間的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
google廣告之另類js調(diào)用實(shí)現(xiàn)代碼
這篇文章主要介紹了google廣告之另類js調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-08-08學(xué)習(xí)javascript,實(shí)現(xiàn)插入排序?qū)崿F(xiàn)代碼
首先新建一個(gè)空列表,用于保存已排序的有序數(shù)列(我們稱之為"有序列表")。從原數(shù)列中取出一個(gè)數(shù),將其插入"有序列表"中,使其仍舊保持有序狀態(tài)。2011-07-07js判斷兩個(gè)數(shù)組相等的5種方法實(shí)例
再最近的一次實(shí)際項(xiàng)目開發(fā)中,又遇到了需要對(duì)兩個(gè)數(shù)組內(nèi)容進(jìn)行比較的需求,索性整理下,這篇文章主要給大家介紹了關(guān)于js判斷兩個(gè)數(shù)組相等的5種方法,需要的朋友可以參考下2022-05-05js實(shí)現(xiàn)有過渡漸變效果的圖片輪播相冊(cè)(兼容IE,ff)
這篇文章主要介紹了js實(shí)現(xiàn)有過渡漸變效果的圖片輪播相冊(cè),兼容IE、ff,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01JS動(dòng)態(tài)創(chuàng)建元素的兩種方法
這篇文章主要為大家詳細(xì)介紹了JS動(dòng)態(tài)創(chuàng)建元素的兩種方法,字符串拼接形式,或是使用Document、Element對(duì)象自帶的一些函數(shù) ,需要的朋友可以參考下2016-04-04JavaScript實(shí)現(xiàn)頁面無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁面無縫滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04微信小程序如何保證每個(gè)頁面都已經(jīng)登陸詳解
前段時(shí)間發(fā)布了一個(gè)微信小程序的簡單登錄,但遇到一個(gè)問題,怎么確保用戶每個(gè)頁面都已經(jīng)登陸了呢,這篇文章主要給大家介紹了關(guān)于微信小程序如何保證每個(gè)頁面都已經(jīng)登陸的相關(guān)資料,需要的朋友可以參考下2021-11-11javascript實(shí)現(xiàn)自動(dòng)輸出文本(打字特效)
文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁的時(shí)候也經(jīng)常能看到這種效果。本文給大家匯總介紹了幾種打字效果的文字特效,文字一個(gè)一個(gè)地打印在頁面上。2015-08-08