JavaScript實現序列請求的示例程式碼

阿新 • • 發佈：2020-09-15

使用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',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實現序列請求的資料請關注我們其它相關文章！