无法从异步 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]);
}

如果这不能解决问题，我将打开一个沙箱并进行更深入的研究。