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

2 篇文章 0 订阅

经常会遇到for循环里有异步操作, 然后数据不对就会很头大

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将异步改为同步,达到预期的 [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)
  })
}

这样再打印出来的结果就是我们想要的结果了

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值