無法從異步 Javascript function 遍歷數組？

Question

我被困在一個問題上，我正在解析getSubscriptions()中 API 的結果。 這會調用getUserSubs() ，它會返回以下 object：

當我調用subscriptions時，我得到了預期的數組控制台（參見“Works”）片段。

但是當我嘗試迭代數組subscriptions時（請參閱“不起作用”），甚至不會調用 function 的內容。

為 API 數據調用 userSubs()

async function getUserSubs(userId) {
  const ref = collection(db, "users", userId, "subscriptions")
  let subList = []
  try {
    const subIds = await getDocs(ref)
    subIds.forEach(subRef => {
      const docRef = subRef.data()
      getDocData(docRef.product).then(product => {
        subList.push(product)
      })
    })
    return subList

  } catch (e) {
    console.error("Error in getting subscriptions: ", e)
    return []
  }
}

作品

function getSubscriptions(userId) {
  getUserSubs(userId).then(subscriptions => {
    console.log(subscriptions)  // Works as intended 
  }
}

不工作

function getSubscriptions(userId) {
  getUserSubs(userId).then(subscriptions => {
    subscriptions.forEach(x => {
      console.log(x)  // ISSUE: This isn't called 
    })
}

也不起作用

let a = []
getUserSubs(userId).then(subscriptions => {
  subscriptions.forEach(x => a.push(x))
})
console.log(a)

我知道有人問過類似的問題，但在閱讀后我仍然無法解決我的問題。

類似問題：

• 如何訪問 promise 的值？
• 將 async/await 與 forEach 循環一起使用

Answer 1

 getUserSubs(userId).then(subscriptions => { console.log(subscriptions) // Works as intended }

不，它沒有。 之所以出現，是因為您正在檢查在記錄到控制台后發生變異的實時數組。

也不起作用：

 let a = [] getUserSubs(userId).then(subscriptions => { subscriptions.forEach(x => a.push(x)) }) console.log(a)

是的，出於相當明顯的原因：在填充數組之前記錄數組。 它需要是

getUserSubs(userId).then(subscriptions => {
  let a = []
  subscriptions.forEach(x => a.push(x))
  console.log(a)
})

或者

let a = []
const subscriptions = await getUserSubs(userId)
subscriptions.forEach(x => a.push(x))
console.log(a)

---

但是這些都不能解決您的核心問題： getUserSubs在填充之前返回一個空數組，在行中

subIds.forEach(subRef => {
  const docRef = subRef.data()
  getDocData(docRef.product).then(product => {
    subList.push(product)
  })
})
return subList

您無需等待getDocData promise。 如果您將其更改為

let subList = []
for (const subRef of subIds) {
  const docRef = subRef.data()
  const product = await getDocData(docRef.product)
  subList.push(product)
}
return subList

要不就

return Promise.all(subIds.map(subRef => {
  const docRef = subRef.data()
  return getDocData(docRef.product)
})

正如您已經找到的問題中所述，它會起作用。

（這可能仍然行不通subIds看起來很像 firebase 快照，它不是數組，既不能迭代，也沒有.map方法。在這種情況下，您需要手動使用forEach + push ）。

Answer 2

老實說，我不會使用 forEach() 方法。 我認為解決此問題所需要做的就是在正常的 for 循環中迭代結果。

for(let subscription of subscriptions) {
   console.log(subscription);
}

OR

for(let index in subscriptions) {
   console.log(subscriptions[index]);
}

如果這不能解決問題，我將打開一個沙箱並進行更深入的研究。