vue 里 for循环中有异步操作导致数据错乱的问题
经常会遇到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)
·
经常会遇到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)
})
}
这样再打印出来的结果就是我们想要的结果了
更多推荐
已为社区贡献2条内容
所有评论(0)