快捷導(dǎo)航

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

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

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

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

問(wèn)題描述

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

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

報(bào)錯(cuò) await is a reserved word

在這里插入圖片描述

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

解決方案

以下將介紹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)
  })
  // 這時(shí)候 list 拿到的值還是promise數(shù)據(jù)
  // 需要再使用promise.all()處理一下，最終listEnd就是Promise里面的數(shù)據(jù)
  let listEnd = await Promise.all(list)
}

以上是個(gè)人經(jīng)驗(yàn)，希望對(duì)大家有所幫助！

如果對(duì)如何獲取Promise對(duì)象中的PromiseResult中的數(shù)據(jù)還是不明白，為什么要用async/await異步調(diào)用方法來(lái)獲取？可以參考另外一篇文章：
如何獲取Promise對(duì)象中的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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: