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],

但是打印结果如下所示,所有异步回来的数据都被追加在了最后

vue 里 for循环中有异步操作导致数据错序的问题

 

 

解决方案:使用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)
  })
}

 

上一篇:实现一个Promise all


下一篇:关于JS Pormise的认识