Angular/Firestore如何等待add、update、set等文档写入操作成功

Angular Fire封装的add/set/update/delete等Firestore写入操作，本身返回的就是标准Promise对象，你只需要两步即可实现需求：

• 第一步：修改服务层的方法，将Firestore操作返回的Promise暴露出来
  调整后的服务代码示例：

  new(): Promise<void> {
    return this.afs.collection<any>(`col/doc/col`).add({
       title: "A new Title",
    });
  }
  

• 第二步：在组件中处理Promise的完成状态，你可以选择async/await语法或者then/catch写法两种方案：
  方案1：async/await写法（更直观，和同步代码逻辑一致）

  async save() {
    try {
      await this.aService.new();
      // 写入成功后的逻辑，例如展示提示、关闭弹窗等
      this.showSuccessTip('新增成功');
      this.closeFormPanel();
    } catch (err) {
      // 写入失败的异常处理，例如展示错误提示
      console.error('写入失败：', err);
      this.showErrorTip('操作失败，请检查网络或权限后重试');
    }
  }
  

  方案2：then/catch写法

  save() {
    this.aService.new()
      .then(() => {
        // 写入成功后的逻辑
        this.showSuccessTip('新增成功');
        this.closeFormPanel();
      })
      .catch(err => {
        // 写入失败的异常处理
        console.error('写入失败：', err);
        this.showErrorTip('操作失败，请检查网络或权限后重试');
      })
  }
  

两种写法逻辑完全一致，async/await只是Promise的语法糖，核心都是等待Firestore写入操作的Promise状态变为成功后，才执行后续的自定义逻辑。

内容的提问来源于stack exchange，提问作者user8836786