使用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實現

依照 promises 規范，一旦一個 promise 被創建，它就被執行了。如果then方法里返回的是一個promise對象，那么執行下一個then 的時候必定是在上一個then執行完之后執行。

關鍵點在于then的時候再創建

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)];// 相當于// 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( {} ) );};

# 執行結果{ 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) { // 第一個初始promise console.log( data ); } return promise( item, data.rep ); } ); } ); // 最后一個promise temporary.then( data => console.log( data ) );};

用 map 遍歷時，需要過濾初始promise的返回值，并且在遍歷結束后，需手動執行最后以后一個promise，否則就會變成如下結果

# 執行結果{}{ 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 }

以上結果明顯不是我們所需要的，但是需要手動過濾第一個promise和執行最后一個promise，會增項不必要的代碼量和出錯率 后將 mapPromise 修改如下，其原理和Array.prototype.reduce+Promise版本類似

const mapPromise = ( arr ) => { let temporary = Promise.resolve( {} ); arr.map( ( item, index ) => { temporary = temporary.then( ( data ) => { // if (i !== 0) { // // 第一個promise // console.log( data ); // } return new Promise( ( resolve, reject ) => { promise( item, data.rep ).then( data => { console.log( data ); resolve( data ); } ); } ); } ); } ); // 最后一個promise // temporary.then( d => console.log( d ) );};

其他

Array.prototype.forEach、Array.prototype.filter、Array.prototype.some、Array.prototype.every等方法和Array.prototype.map類似，就不過多贅述

以上就是JavaScript實現串行請求的示例代碼的詳細內容，更多關于JavaScript實現串行請求的資料請關注好吧啦網其它相關文章！