JavaScript實(shí)現(xiàn)串行請(qǐng)求的示例代碼
使用async和await
var fn = async function(promiseArr) { for(let i = 0,len = arr.length; i<len; i++) { currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]); var result = await currentPromise; console.log(result) } } fn(arr)
Promise實(shí)現(xiàn)
依照 promises 規(guī)范,一旦一個(gè) promise 被創(chuàng)建,它就被執(zhí)行了。如果then方法里返回的是一個(gè)promise對(duì)象,那么執(zhí)行下一個(gè)then 的時(shí)候必定是在上一個(gè)then執(zhí)行完之后執(zhí)行。
關(guān)鍵點(diǎn)在于then的時(shí)候再創(chuàng)建
var createPromise = function(time) { return (resolve, reject)=> { return new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('timein'+time) resolve(); }, time*1000) }) } } function serpromise(arr) { arr.reduce((pre, next, index, carr)=>{ return pre.then(next) }, Promise.resolve()) } var arr=[createPromise(2),createPromise(1),createPromise(3),createPromise(4),createPromise(5)]; // 相當(dāng)于 // Promise.resolve().then(createPromise(2)).then(createPromise(1))...... serpromise(arr)
Array.prototype.reduce + async/await 版本
const reduceAsync = ( arr ) => { arr.reduce( async ( prev, curr ) => { const { rep } = await prev; const obj = await promise( curr, rep ); console.log( obj ); return obj; }, Promise.resolve( {} ) ); };
Array.prototype.reduce + Promise 版本
const reducePromise = ( arr ) => { arr.reduce( ( prev, curr ) => { return prev.then( data => { return new Promise( ( resolve, reject ) => { promise( curr, data.rep ).then( res => { console.log( res ); resolve( res ); } ); } ); } ); }, Promise.resolve( {} ) ); };
# 執(zhí)行結(jié)果
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }
{ req: 'PM:04:49:17', rep: 'PM:04:49:20', item: 4 }
Array.prototype.map + Promise 版本
const mapPromise = ( arr ) => { let temporary = Promise.resolve( {} ); arr.map( ( item, index ) => { temporary = temporary.then( ( data ) => { if (i !== 0) { // 第一個(gè)初始promise console.log( data ); } return promise( item, data.rep ); } ); } ); // 最后一個(gè)promise temporary.then( data => console.log( data ) ); };
用 map 遍歷時(shí),需要過濾初始promise的返回值,并且在遍歷結(jié)束后,需手動(dòng)執(zhí)行最后以后一個(gè)promise,否則就會(huì)變成如下結(jié)果
# 執(zhí)行結(jié)果
{}
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }
以上結(jié)果明顯不是我們所需要的,但是需要手動(dòng)過濾第一個(gè)promise和執(zhí)行最后一個(gè)promise,會(huì)增項(xiàng)不必要的代碼量和出錯(cuò)率 后將 mapPromise 修改如下,其原理和Array.prototype.reduce+Promise版本類似
const mapPromise = ( arr ) => { let temporary = Promise.resolve( {} ); arr.map( ( item, index ) => { temporary = temporary.then( ( data ) => { // if (i !== 0) { // // 第一個(gè)promise // console.log( data ); // } return new Promise( ( resolve, reject ) => { promise( item, data.rep ).then( data => { console.log( data ); resolve( data ); } ); } ); } ); } ); // 最后一個(gè)promise // temporary.then( d => console.log( d ) ); };
其他
Array.prototype.forEach、Array.prototype.filter、Array.prototype.some、Array.prototype.every等方法和Array.prototype.map類似,就不過多贅述
以上就是JavaScript實(shí)現(xiàn)串行請(qǐng)求的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript實(shí)現(xiàn)串行請(qǐng)求的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js獲得當(dāng)前系統(tǒng)日期時(shí)間的方法
這篇文章主要介紹了js獲得當(dāng)前系統(tǒng)日期時(shí)間的方法,涉及javascript操作日期時(shí)間的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05一步步教你利用Canvas對(duì)圖片進(jìn)行處理
這篇文章主要給大家介紹了關(guān)于利用Canvas對(duì)圖片進(jìn)行處理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí),格式如4天7小時(shí)58分鐘39秒,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),我們常常通過將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法。本文為大家總結(jié)了6個(gè)JS字符串轉(zhuǎn)數(shù)組的方法,希望對(duì)你有所幫助2022-09-09微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的全過程
在小程序中,有默認(rèn)的圖標(biāo)icon組件,但你會(huì)發(fā)現(xiàn)它的圖標(biāo)樣式很少,可能很多時(shí)候并不能滿足我們的需求,所以這篇文章主要給大家介紹了關(guān)于微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的相關(guān)資料,需要的朋友可以參考下2022-09-09用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例
下面小編就為大家?guī)?lái)一篇用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07