js循環中使用async/await踩過的坑

最近寫koa的時候碰見須要在循環中使用async/await的狀況，固然第一反應就是直接上forEach，而後就直接翻車了。。。

直接上代碼：

function handleSql(val) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`延時${val}秒觸發`)
      resolve(val);
    }, 1000);
  })
}

[1,2,3].forEach(async index => {
  console.log('調用await以前',index)
  const result = await handleSql(index);
  console.log('調用await以後',index)
})

在個人預期中應該是這樣輸出的：

結果他是這樣輸出的：

先循環3次執行 console.log('調用await以前',index) 語句，而後等待一秒後執行了console.log(`延時${val}秒觸發`)和console.log('調用await以後',index)語句。

查了一下MDN的forEach文檔發現有這麼一句話：

注意： 沒有辦法停止或者跳出 forEach 循環，除了拋出一個異常。若是你須要這樣，使用forEach()方法是錯誤的，你能夠用一個簡單的循環做爲替代。

原來是forEach中不支持這種騷操做，果斷換成普通的for循環或者for ... of：

async function forFn() {
  for(let index of [1,2,3]){
    console.log('調用await以前',index)
    const result = await handleSql(index);
    console.log('調用await以後',index)
  }
}

async function forFn() {
  for(var index = 1;index<4;index++) {
    console.log('調用await以前',index)
    const result = await handleSql(index);
    console.log('調用await以後',index)
  }
}

執行後的效果就是咱們的預期效果：