Javascript：追加到带有异步查询结果的数组中

Question

我有一个异步函数，我想包含三个异步查询的结果（它们是firebase firestore查询）。我循环执行，并尝试将查询结果追加到更大范围的数组中。不幸的是，brands数组的结果始终为空。这是因为我需要await内部查询吗？有没有更好的方法可以完全解决此问题？

async function getBrandsHelper() {
  var brands = [];
  await db
    .collection("global")
    .doc("display-data")
    .get()
    .then(doc => {
      const displayData = doc.data();
      const keys = ["p1", "p2", "p3"];
      for (const i in keys) {
        const k = keys[i];
        const product = displayData[k];
        db.collection("products")
          .doc(product)
          .get()
          .then(doc => {
            var brandData = { id: product };
            const productData = doc.data();
            brandData["image"] = productData["image"];
            brandData["title"] = productData["title"];
            brandData["description"] = productData["description"];
            brandData["url"] = productData["url"];
            brands.push(brandData);
            return;
          })
          .catch(e => {
            console.error(e);
          });
      }
      return;
    })
    .catch(e => {
      console.error(e);
    });
  return brands;
}

Answer 1

您应该重构代码以使用async/await或then/catch回调。

这是使用async/await的方式（注意不涉及then/catch）：

async function getBrandsHelper() {
  let brands = [];
  try {
    // You await for the doc1 to be ready
    const doc1 = await db
      .collection("global")
      .doc("display-data")
      .get();

    const displayData = doc1.data();
    const keys = ["p1", "p2", "p3"];
    for (const i in keys) {
      const k = keys[i];
      const product = displayData[k];

      // You await for each doc2 before moving on
      const doc2 = await db.collection("products")
        .doc(product)
        .get();

      let brandData = {
        id: product
      };
      const productData = doc2.data();
      brandData["image"] = productData["image"];
      brandData["title"] = productData["title"];
      brandData["description"] = productData["description"];
      brandData["url"] = productData["url"];
      brands.push(brandData);
    }

    return brands;
  } catch (error) {
    console.log(error)
    return []
  }
}

使用then/catch回调会更复杂（由于for循环内的异步调用）。>>

无论如何，您似乎对Java中的Promises和异步代码缺乏更深入的了解。我建议您多读一些有关Promises here和async/await的用法以及它与Promise here的关系>

您应该使用承诺：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise建立您的诺言，并在所有诺言都执行后使用Promise.all来做某事。

Answer 2

您应该使用承诺：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise建立您的诺言，并在所有诺言都执行后使用Promise.all来做某事。