将数据写入 Firestore 时显示加载指示器答案

【问题标题】：Showing loading indicator while writing data to Firestore将数据写入 Firestore 时显示加载指示器
【发布时间】：2018-11-20 14:02:40
【问题描述】：

我有一个关于事实的问题，我似乎无法弄清楚在更新 Firestore 时如何显示加载程序。

我提供了以下示例，但不要介意我在示例中使用的内容。关键是，在所有创建或更新完全完成之前，我似乎无法弄清楚如何显示加载指示器。

如果我尝试在 firestore 调用之前和之后设置状态，则微调器只会在 1 秒内出现，因为实际调用在更新 firestore 时在后台运行（我认为是异步的）。

谁能帮帮我？

提前致谢。

array.forEach(itemInArray => {
db.where(test, '==', itemInArray.test )get()
  .then((result) => {
    // try to update doc first
    db.doc(result.docs[0].id).update({
      test: 'test'
    });
  })
  // update successfull
  .then(() => console.log('Document exists! We have updated the current one'))
  // If the update failed, we create new doc
  .catch((err) => {
    console.log('Created document);
    db.doc().set({
      test: 'test'
    });
  });

});

【问题讨论】：

您是在问如何通知浏览器（或任何客户端）数据库操作已完成？
客户端。我想在更新数据库时显示一个微调器。
如何与服务器通信？ REST API？网络套接字？火警信号？
以下 REST API firebase.google.com/docs/firestore/use-rest-api
啊，我明白了。为什么您认为 Firestore 需要更长的时间来更新？您的微调器出现的 1 秒主要是消息传播时间，这是非常合理的。

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

正如我们在聊天中所讨论的，如果您的数据库操作需要按顺序进行，您可以这样做：

showSpinner();
updateFirstThing()
  .then(() => updateSecondThing())
  .then(() => updateThirdThing())
  .catch(err => handlerError(err))
  .finally(() => hideSpinner());

如果某些操作可以并行，您需要考虑使用Promise.all 以确保在所有承诺都实现（或出现错误）时隐藏微调器。

【讨论】：