快捷導(dǎo)航

vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法

更新時間：2023年10月30日 11:34:54 作者：TTong___

大家都遇到這樣的問題,在使用函數(shù)的async/await異步調(diào)用時候,放在正常函數(shù)中單個調(diào)用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧

vue項目中如何在 for 循環(huán)里面使用異步調(diào)用 async/await

問題描述

在使用函數(shù)的async/await異步調(diào)用時候，放在正常函數(shù)中單個調(diào)用時沒有問題的，但是await放在forEach()循環(huán)里面就會報錯

async detailData (newVal) {
  newVal.forEach(line => {
    var list = await infoStore(line.id)
  })
}

報錯 await is a reserved word

在這里插入圖片描述

這是因為async和await必須成對出現(xiàn)，如果調(diào)用await的地方無法正確匹配到async則會報錯，
forEach屬于并發(fā)操作，在 forEach 循環(huán)內(nèi)調(diào)用異步函數(shù)時，下一個循環(huán)并不會等到上個循環(huán)結(jié)束后再被調(diào)用，所以以上調(diào)用方式才會報錯。

解決方案

以下將介紹forEach和其他循環(huán)中async/await異步調(diào)用方法

1. forEach 循環(huán)中處理

async detailData (newVal) {
  await Promise.all(
    newVal.forEach(async line => {
      var list = await infoStore(line.id)
    })
  )
}

2. for of 中處理

async detailData (newVal) {
  for (let item of newVal){
    var list = await infoStore(item.id)
  }
}

3. for 循環(huán)中處理

async detailData (newVal) {
  for (var i=0; i<newVal.length; i++) {
    var list = await infoStore(newVal[i].id)
  }
}

4. map 中處理

async detailData (newVal) {
  let list = newVal.map(async item => {
    return await infoStore(item.id)
  })
  // 這時候 list 拿到的值還是promise數(shù)據(jù)
  // 需要再使用promise.all()處理一下，最終listEnd就是Promise里面的數(shù)據(jù)
  let listEnd = await Promise.all(list)
}

以上是個人經(jīng)驗，希望對大家有所幫助！

如果對如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)還是不明白，為什么要用async/await異步調(diào)用方法來獲??？可以參考另外一篇文章：
如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)

到此這篇關(guān)于vue 如何在 for 循環(huán)里面使用異步調(diào)用 async/await的文章就介紹到這了,更多相關(guān)vue for循環(huán)異步調(diào)用 async/await內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: