Angular中如何控制扣减、恢复库存两个方法的执行顺序？

AI 小北

2026-10-18

问题根源

执行顺序混乱是因为HttpClient返回的是异步Observable，调用subscribe后不会阻塞后续代码执行，主线程会直接继续运行后续的恢复库存逻辑，等http请求响应回来才会触发subscribe里的回调，因此会先打印恢复库存相关日志，最后才打印method1和method2的执行日志。

解决方案

使用RxJS的forkJoin操作符批量执行并行请求，等所有扣减库存请求全部完成后，再触发恢复库存的逻辑即可。

首先从rxjs导入依赖：

import { forkJoin } from 'rxjs';

调整后的业务逻辑代码如下：

// 1. 收集所有扣减库存的请求
const deductStockRequests = productsItem.map(item => {
  const id = item.product.id;
  const quantity = item.quantity;
  console.log("ID: " + id);
  console.log("Quantity: " + quantity);
  // 直接返回Observable，不在此处subscribe
  return this.productService.productStock(Number(id), quantity);
});

// 2. 批量执行所有扣减库存请求
forkJoin(deductStockRequests).subscribe({
  next: () => {
    // 所有扣减请求都完成后才会进入当前回调
    console.log("Executing method '1'（扣减库存）");
    console.log("Cycle finished");

    // 3. 开始执行恢复库存逻辑
    console.log("Recovering the stock of the products");
    const recoverStockRequests = productsItem.map(item => {
      const id = item.product.id;
      const quantity = item.quantity;
      console.log("ID: " + id);
      console.log("Quantity: " + quantity);
      return this.productService.retrieveProductStock(Number(id), quantity);
    });

    // 4. 批量执行所有恢复库存请求
    forkJoin(recoverStockRequests).subscribe({
      next: () => {
        console.log("Executing method '2'（恢复库存）");
        console.log("Cycle finished");
      },
      error: (err) => console.error('恢复库存失败:', err)
    })
  },
  error: (err) => console.error('扣减库存失败:', err)
})