在完成操作之前重新加载页面（大多数情况下）——Vue 和 Firebase答案

【问题标题】：Page reloading before completing the operation (most of the times) - Vue and Firebase在完成操作之前重新加载页面（大多数情况下）——Vue 和 Firebase
【发布时间】：2020-06-26 07:04:42
【问题描述】：

出了点问题。没有错误，但是当我按下按钮时，很少会加载具有更新状态的页面。它发生在 POS 应用程序中的两个独立的类似组件中。我想更改当前卖家，使用卖家表中的按钮。

卖家组件-HTML。在表内

  <tbody class="text-left">
    <tr v-for="(seller, index) in sellers" :key="index">
      <td v-if="!seller.active">
        <button class="btn btn-outline-success" @click="activateSeller(seller)">
          <i class="fas fa-user-check"></i>
        </button>
      </td>
      <td v-if="seller.active">
        <i class="fas fa-check"></i>
      </td>
    </tr>
  </tbody>

脚本

activateSeller(seller) {
  db.collection("sellers")
    .where("active", "==", true)
    .get()
    .then(snapshot => {
      snapshot.docs.forEach(doc => {
        db.collection("sellers")
          .doc(doc.id)
          .set(
            {
              active: false
            },
            { merge: true }
          );
      });
    })
    .then(() => {
      db.collection("sellers")
        .where("number", "==", `${seller.number}`)
        .get()
        .then(snapshot => {
          snapshot.docs.forEach(doc => {
            db.collection("sellers")
              .doc(doc.id)
              .set(
                {
                  active: true
                },
                { merge: true }
              );
          });
        });
    })
    .then(() => {
      location.reload();
    })

}

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

你应该正确chain不同的promise以及使用Promise.all()等待所有并行写入完成，如下：

  function activateSeller(seller) {
    const sellerColl = db.collection('sellers');

    sellerColl
      .where('active', '==', true)
      .get()
      .then(snapshot => {
        const promises = [];
        snapshot.forEach(doc => {
          promises.push(doc.ref.set({ active: false }, { merge: true }));
        });
        return Promise.all(promises);
      })
      .then(() => {
        return sellerColl.where('number', '==', `${seller.number}`).get();
      })
      .then(snapshot => {
        const promises = [];
        snapshot.forEach(doc => {
          promises.push(doc.ref.set({ active: true }, { merge: true }));
        });
        return Promise.all(promises);
      })
      .then(() => {
        location.reload();
      });
  }

请注意，您可以使用batched write 代替Promise.all()，但请注意，一次批处理写入中最多有500 个操作。

另请注意，您可以通过catch() 结束您的承诺链，以便管理错误并通知您的最终用户。

【讨论】：