如何使用 async / await 函数？

Question

我有一个功能如下：

function getMessages(){
     this.removeListener = myFirestore
          .collection('messages')
          .doc(this.groupChatId)
          .collection(this.groupChatId)
          .onSnapshot(
            snapshot => {
              snapshot.docChanges().forEach(change => {
                if (change.type === 'added') {
                  this.listMessage.push(change.doc.data())
                }
              })
            },
            err => {
              console.log(err)
            }
          )
          return this.renderMessages()   # my function
        }

在上面的函数中，我需要在this.renderMessages()函数中使用this.listMessage数组。为此，getMessages()函数应该先执行我的firestore查询，然后应该调用this.renderMessages()函数。但是不执行firestore查询this.renderMessages()正在被调用。我知道这是 async / await 函数的问题，但我对这些函数了解不多。

现在如何使用 async / await 函数在 firestore 查询后调用 this.renderMessages() 函数？

Answer 1

您可以尝试使用这种方法来使用 async/await。

async function getMessage() {
 try {
 this.removeListener = await myFirestore
  .collection("messages")
  .doc(this.groupChatId)
  .collection(this.groupChatId)
  .onSnapshot(snapshot => {
    snapshot.docChanges().forEach(change => {
      if (change.type === "added") {
        this.listMessage.push(change.doc.data());
      }
    });
   });
} catch (error) {
console.log(error);
}
return this.renderMessages();
}

上面的代码等待myFirestore，然后返回rendermessage。关键字 await 使 JavaScript 等待，直到该承诺完成并返回其结果。希望这可以帮助。如果 ypu 想要捕获错误，那么您可以使用 try..catch 块