vue 里 for循環中有異步操作導致數據錯序的問題

在做項目應該會經常遇到這種場景，就是在循環中請求數據，但是由於異步的問題，會讓數據錯亂

// 給下標為偶數的元素加10
Func () {
  let tempArr = []
  for (let i = 0; i < 10; i++) {
    if (i % 2 == 0) {
      tempArr.push(i + 10)
    } else {
      //  setTimeout 模擬遇到的異步操作
      setTimeout(() => {
        tempArr.push(i)
      }, 1)
    }
  }
  console.log(56, tempArr)
},

比如上述代碼，希望獲得的數據是 [10, 1, 12, 3, 14, 5, 16, 7, 18, 9]，

但是打印結果如下所示，所有異步回來的數據都被追加在了最后

 

 

解決方案：使用async await  + promise等待異步結果，再次打印就是希望的[10, 1, 12, 3, 14, 5, 16, 7, 18, 9]

async Func () {
  let tempArr = []
  for (let i = 0; i < 10; i++) {
    if (i % 2 == 0) {
      tempArr.push(i + 10)
    } else {
      await this.asyncFunc(tempArr, i)
    }
  }
  console.log(56, tempArr)
},
asyncFunc (tempArr, i) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      tempArr.push(i)
      // 在異步中將結果返回
      resolve()
    }, 1)
  })
}