如何使用异步/等待功能?

时间:2020-04-19 14:12:14

标签: reactjs async-await

我的功能如下:

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.listMessage函数中使用this.renderMessages()数组。为此,getMessages()函数应先执行我的Firestore查询,然后再调用this.renderMessages()函数。但是没有执行Firestore查询this.renderMessages()。我知道这是异步/等待功能的问题,但是我对这些功能的了解不多。

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

1 个答案:

答案 0 :(得分:0)

您可以尝试使用这种类型的方法来使用异步/等待。

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