如何處理循環的異步操作

如何處理循環的異步操作

先看一段代碼

function getMoney(){
    var money=[100,200,300]  
    for( let i=0; i<money.length; i++){
        compute.exec().then(()=>{
            console.log(money[i])
            //alert(i)
        })
    }
}
//compute.exec()這是個異步方法,在里面處理一些實際業務
//這時候打印出來的很可能就是300,300,300（因為異步for循環還沒有等異步操作返回Promise對象過來i值已經改變）

正確處理思路

async function getMoney(){
    var money=[100,200,300]  
    for( let i=0; i<money.length; i++){
        await compute.exec().then(()=>{
            console.log(money[i])
            //alert(i)
        })
    }
}
//關鍵字async/await  async告訴getMoney方法里面存在異步的操作，await放在具體異步操作（方法）前面，意思是等待該異步返回Promise才會繼續后面的操作

另外還有一種遞歸的處理思路 

function getMoney(i) {
　　var money=[100,200,300]
　　compute.exec().then(() => {
　　　　if ( i < money.length ) { 　
　　　 　　console.log(money[i]);
　　　 　　i++;
      　　getMoney(i);
    　　}
  　});
}
getMoney(0);//開始調用
//用遞歸來實現自我循環（具體循環在then里面，可以確保前面的compute.exec()的異步操作完成）.then()是返回了Promise對象為resolve后才進行的（可以了解一下Promise對象）

原文地址：http://www.fly63.com/article/detial/6407