使用 .then() JavaScript 从承诺中未定义答案

【问题标题】：Undefined from promise using .then() JavaScript使用 .then() JavaScript 从承诺中未定义
【发布时间】：2021-10-24 23:38:13
【问题描述】：

我正在尝试使用多个查询从 Firestore 获取数据，但返回的数据始终未定义，即使 .then() 块中的 console.log(data) 显示数据存在。

const getPeers = async () => {
    let query = firestore.collection("users");
    if (country !== "") query = query.where("country", "==", country);
    if (gender !== "") query = query.where("gender", "==", gender);
    if (age !== "") query = query.where("age", "==", age);
    if (religion !== "") query = query.where("religion", "==", religion);
    if (budget_low !== "") query = query.where("budget_low", ">=", Number(budget_low));
    if (budget_high !== "") query = query.where("budget_high", "<=", Number(budget_high));
    query
      .get()
      .then((querySnapshot) => {
        var data = [];
        querySnapshot.forEach((doc) => {
          data.push(doc.data());
        });
        console.log(data) // data exist here after console log.
        return data;
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  };

  let d = await getPeers();
  console.log(d); // gets undefined

【问题讨论】：

似乎是一个时间问题，如果你链接日志会发生什么... let d = await getPeers().then(() => { console.log(d) }) 类似的东西

标签： javascript firebase google-cloud-firestore async-await

【解决方案1】：

你必须在你的函数getPeers()中返回承诺：

const getPeers = async () => {
    let query = firestore.collection("users");
    if (country !== "") query = query.where("country", "==", country);
    if (gender !== "") query = query.where("gender", "==", gender);
    if (age !== "") query = query.where("age", "==", age);
    if (religion !== "") query = query.where("religion", "==", religion);
    if (budget_low !== "") query = query.where("budget_low", ">=", Number(budget_low));
    if (budget_high !== "") query = query.where("budget_high", "<=", Number(budget_high));
    return query // here return the promise
      .get()
      .then((querySnapshot) => {
        var data = [];
        querySnapshot.forEach((doc) => {
          data.push(doc.data());
        });
        console.log(data) // data exist here after console log.
        return data;
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  };

编辑：

在处理异步函数中的错误时的一点建议，在您的代码中，您有一个带有 console.log 的 catch() 处理程序：

return query.get() // here return the promise     
      .then((querySnapshot) => {
        ...
      })
      .catch((error) => {
        console.log("Error getting documents: ", error); 
        // If query.get() fails, then 'await getPeers();'
        // will return 'undefined'. 
      });
};

let d = await getPeers();
console.log(d); // will be undefined if query.get() returns an error.

为避免这种情况，您可以像这样在catch() 中抛出错误：

.catch((error) => {
   throw "An error occurred";
});

那么你可以检查是否发生了这样的错误：

let d = await getPeers().catch(error => {
  // here you can throw the error or do something else like return null for example.
 console.error(error);
 return null;
});

if (d){ // now you can validate that your data exists
...
}

你可以看到更多关于异步函数here。

记住this：

异步函数总是返回一个承诺。如果异步函数的返回值不是显式的 Promise，它将被隐式包装在 Promise 中。

【讨论】：