安全实现级联删除：主对象删除时同步清理子对象

本文详细讲解在前端 Angular 应用中，如何借助 HTTP DELETE 请求安全实现级联删除的完整逻辑——即在删除公司时自动清除其所有分支机构，并妥善处理无关联分支、网络失败等边界场景。

在实际业务系统中，“删除公司”这一操作背后往往并非一个简单的 HTTP 请求就能完成。原因在于公司下面通常挂载着分支机构（子实体）。如果公司被删除而分支仍然存在，数据库中将产生大量“无主”数据，轻则导致数据不一致，重则触发外键约束报错。因此，我们需要一套前端驱动的级联删除逻辑，既要保证正确性与健壮性，又要兼顾用户体验。

首先明确一个大原则：该操作绝对不能并发执行，更不能颠倒顺序。

✅ 正确的执行顺序：先子后主

必须严格遵守“先删除所有关联分支 → 再删除公司”这一顺序。为什么？试想如果先删除公司，分支表中关联的 companyId 字段将变成无效引用，后续再通过该 ID 定位并删除分支时将无法找到目标。若并发执行，则更容易因数据库事务隔离级别或网络延迟引发竞态问题——届时数据混乱不堪，后果难以控制。

因此，执行顺序是硬性约束。

✅ 基于 RxJS 的链式错误处理实现

下面这段代码采用了典型的嵌套订阅结合状态判断逻辑，专门应对各种边界场景。来看实践：

deleteCompany(id: number) {  console.log('Attempting to delete company with ID:', id);  // 第一步：尝试删除所有关联分支  this.repository.deleteBranch(`addBranchToCompany?companyId=${id}`).subscribe({    next: () => {      console.log('All branches associated with company deleted successfully');      // 分支删除成功后，再删除公司      this.repository.deleteCompany(`addCompany/${id}`).subscribe({        next: () => {          console.log('Company deleted successfully');          this.getCompanies(); // 刷新列表        },        error: (err) => {          console.error('Failed to delete company after branch cleanup:', err);          this.handleError('Company deletion failed', err);        }      });    },    error: (branchError) => {      // 特别处理 404：表示无分支关联，属于合法状态，可直接删公司      if (branchError.status === 404) {        console.warn('No branches found for company ID:', id, '— proceeding to delete company only.');        this.repository.deleteCompany(`addCompany/${id}`).subscribe({          next: () => {            console.log('Company deleted (no branches existed)');            this.getCompanies();          },          error: (err) => {            console.error('Failed to delete company (no branches):', err);            this.handleError('Company deletion failed', err);          }        });      } else {        // 其他分支删除错误（如 500、timeout），应中止流程并提示用户        console.error('Unexpected error deleting branches:', branchError);        this.handleError('Failed to delete associated branches', branchError);      }    }  });}

这段代码表面上直观易懂，但其中的逻辑判断才是精髓。试想，如果分支删除失败，原因是什么？若返回 404，说明该公司没有关联任何分支，属于合法状态，此时可以跳过分支删除，直接删除公司。但如果返回 500（服务器故障）或超时，则不能继续执行后续操作，必须中断流程，并向用户展示明确的错误提示。

这恰恰是整个级联操作中最容易被忽略、也最容易踩坑的关键点。

⚠️ 关键注意事项

• 避免“火上浇油”式错误处理：许多新手编写代码时，喜欢用 if (!error) 或空白 catch 直接忽略分支删除失败的问题。这种做法极其危险。必须严格区分语义错误（如 404，表示“没有分支需要删除”，可降级处理）与系统错误（如 500，表示“服务器异常”，需中断并告警）。
• 服务端建议增强：话说回来，前端实施级联删除终究是“权宜之计”。最理想的方案是后端提供类似 /companies/{id}/cascade-delete 的专用接口，由后端统一通过事务管理保证删除的原子性。前端的这套实现更适合过渡期或轻量级场景。
• UI 友好反馈：在实际项目中，调用前应显示加载状态（例如设置 isDeleting = true 变量），成功后弹出 Toast 提示“已删除”，失败时则明确告知用户“删除失败，请重试”，而不是仅在控制台输出一行日志。用户体验与正确性同等重要。
• ID 类型一致性：注意示例代码中有一个容易被忽略的细节：companyId 在 JSON 中是字符串 "1"，但 URL 参数里使用的是数字 id。务必确保后端接口能兼容字符串和数字两种 ID 格式，或者统一转换为字符串再拼接到 URL 中（例如 addBranchToCompany?companyId=${id.toString()}）。

✅ 总结

级联删除这个需求，听起来似乎只是发送两个请求那么简单。但在实际工程中，它涵盖了依赖顺序、错误分类、降级策略与用户体验这四个维度的完整设计。本文给出的实现既满足了核心功能，也覆盖了“无关联数据”“网络异常”等真实场景。如果你正在 Angular 项目中开发类似的删除功能，不妨将其作为参考范式。