Angular API调用顺序问题：需等前置API完成再执行saveQuickExpense

原代码的问题在于saveArticle和saveSupplier是异步操作，调用后不会等待返回结果就直接执行后续的saveQuickExpense判断，导致目标接口提前触发。要实现"等待必要API完成后再调用saveQuickExpense"的需求，我们可以利用RxJS的操作符来管理异步流的执行顺序。

重构思路 #

1. 把文章和供应商的处理逻辑包装成Observable流，确保每个异步操作完成后再执行后续步骤
2. 使用forkJoin（并行执行）或concat（顺序执行）等待所有必要操作完成
3. 在所有前置操作完成后，再调用saveQuickExpense

代码示例（并行执行场景） #

假设saveArticle和saveSupplier返回的是Observable（Angular HttpClient默认返回Observable），重构后的代码如下：

import { forkJoin, of } from 'rxjs';
import { tap } from 'rxjs/operators';

// 处理文章保存逻辑
const handleArticle$ = article[0] === undefined 
  ? this.saveArticle(this.quickExpense.ExpenseArticle).pipe(
      tap(savedArticle => {
        // 保存成功后更新quickExpense和状态标记
        this.quickExpense.ExpenseArticle = savedArticle;
        this.isArticleSaved = true;
      })
    )
  : of(null); // 文章已存在，无需操作

// 处理供应商保存逻辑
const handleSupplier$ = supplier[0] === undefined
  ? this.saveSupplier(this.quickExpense.SupplierCode).pipe(
      tap(savedSupplier => {
        // 保存成功后更新quickExpense和状态标记
        this.quickExpense.SupplierCode = savedSupplier.value;
        this.isSupplierSaved = true;
      })
    )
  : of(null).pipe(
      tap(() => {
        // 供应商已存在，直接赋值
        this.quickExpense.SupplierCode = supplier[0].value;
      })
    );

// 等待两个异步操作都完成后，调用saveQuickExpense
forkJoin([handleArticle$, handleSupplier$]).subscribe({
  next: () => {
    this.saveQuickExpense(this.quickExpense);
  },
  error: err => {
    // 处理API调用失败的情况，比如弹窗提示
    console.error('文章或供应商保存失败:', err);
  }
});

顺序执行场景（如果需要先保存文章再保存供应商） #

如果业务要求必须先完成文章保存，再执行供应商操作，把forkJoin换成concat即可：

import { concat, of } from 'rxjs';
import { tap } from 'rxjs/operators';

// 顺序执行文章和供应商的处理逻辑
concat(handleArticle$, handleSupplier$).subscribe({
  complete: () => {
    this.saveQuickExpense(this.quickExpense);
  },
  error: err => {
    console.error('保存操作失败:', err);
  }
});

注意事项 #

• 如果你的saveArticle/saveSupplier返回的是Promise，需要用from()把Promise转成Observable：

  import { from } from 'rxjs';
  const handleArticle$ = article[0] === undefined 
    ? from(this.saveArticle(this.quickExpense.ExpenseArticle)).pipe(...)
    : of(null);
  

• 务必在tap或订阅回调中正确更新this.quickExpense的属性，确保saveQuickExpense拿到最新的数据

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