Angular中如何实现点击一次按钮同时调用两个Node.js API接口

• 按钮同时绑定了两个click事件，事件执行是串行逻辑，第一个方法触发的confirm弹窗属于同步阻塞操作，弹窗未处理前第二个方法不会执行
• 两个删除方法各自独立封装了confirm确认逻辑，因此会连续弹出两次确认框，需要两次点击确认才能完成两个接口的调用

1. 修改 main.component.html #

去掉重复的点击事件绑定，只保留一个统一的批量删除方法调用：

<button type="button" class="modalbtn1" (click)="deleteBothArticle(articleDetails.articleid)">Delete</button>

2. 修改 main.component.ts #

新增统一的删除处理方法，仅弹出1次确认框，同时发起两个接口请求，推荐使用RxJS的forkJoin实现并行请求管理：
首先提前导入依赖：

import { forkJoin } from 'rxjs';

新增方法如下，原有两个独立的删除触发方法可删除：

deleteBothArticle(id) {
  // 全局仅弹出1次确认框
  if (confirm('Are you sure you want to delete?')) {
    // 构造两个删除请求实例
    const deleteMysqlRequest = this.article.deleteArticlesData({ articleid: id });
    const deleteMongoRequest = this.article.deleteArticlesDataMongo({ articleid: id });

    // 并行发起两个请求，全部返回后统一处理结果
    forkJoin([deleteMysqlRequest, deleteMongoRequest]).subscribe({
      next: ([mysqlRes, mongoRes]) => {
        console.log('MySQL删除接口返回：', mysqlRes);
        console.log('MongoDB删除接口返回：', mongoRes);
        console.log(this.userId, this.username, Date);
        // 此处可补充删除成功后的业务逻辑，例如刷新列表、关闭弹窗等
      },
      error: (err) => {
        console.error('删除操作失败：', err);
        // 此处可补充错误提示等异常处理逻辑
      }
    })
  }
}

备注：如果需要两个请求互相独立，其中一个失败不影响另一个的执行，可以单独给每个请求添加catchError捕获异常，避免整个并行请求中断。

3. article.service.ts 无需修改 #

现有代码已经正常返回两个请求的Observable实例，可直接被调用。

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