为什么async/await然后产生不同的结果

Question

我问这个问题只是为了澄清并更好地理解 javascript 承诺。下面两段代码和我看起来很像，但是为什么都给出了不同的结果。还有如何以 .then 的方式得到 async/await 函数的结果。谢谢。

async/await

const getFieldValue = async (collection, userid) => {
  let response;

  const querySnapshot = await firestore()
    .collection(collection)
    .where("userid", "==", userid)
    .get();
  querySnapshot.forEach((doc) => {
    const { name } = doc.data();
    response = name;
  });

  return response;
};

async function fetchData() {
  const name = await getFieldValue("Users", userid);
  console.log("name", name);
}
fetchData();

.然后

const getFieldValue = (collection, userid) => {
  let response;

  firestore()
    .collection(collection)
    .where("userid", "==", userid)
    .get()
    .then((querySnapshot) => {
      querySnapshot.docs.find((doc) => {
        const { name } = doc.data();
        response = name;
      });
    })
    .catch((e) => console.log(e));

  return response;
};

const name = getFieldValue("Users", userid);
console.log("name", name);

async/await returns 正确的名字和 .then returns undefined

Answer 1

因为 async/await 函数的执行被暂停（“暂停”），直到 promise 被解析 .因此你的函数等待结果。

使用 .then 但是，您的 函数将立即继续 并使用 .then“块”下方的代码，不等待承诺解决。由于该响应在 .then 部分中设置之前 returned，因此仍未定义。

使用 async/await 你必须想象 return 语句也在 .then 块中。

Answer 2

是的，这正是人们所期望的。

请记住，await 有效地暂停执行，直到等待的操作完成。

在您使用 .then 的示例中，您会立即 return 因为您没有编写您的承诺链，因此 response 仅在等待操作序列时才 returned完成。相反，您 return 立即使用初始化 response 的 undefined 值

因此，通过 .then 表达您的逻辑的正确方法是

 const getFieldValue = (collection, userid) => {
    let response;

    return firestore() // notice the return here! This is vital
      .collection(collection)
      .where("userid", "==", userid)
      .get()
      .then((querySnapshot) => {           
        querySnapshot.docs.find((doc) => {
          const { name } = doc.data();
          response = name;
        });
      })
      .then(() => response) // notice how we resolve our promise chain with the value ultimately assigned
      .catch((e) => console.log(e));
};

为什么async/await然后产生不同的结果

Why async/await and then produce different results

javascript

asynchronous

promise

async-await

google-cloud-firestore