Angular学习项目中用RxJS switchMap替代多层subscribe返回undefined求解

你写法出错的核心原因是：第一层switchMap返回的是addToCart接口的响应结果，你默认该响应会返回购物车ID字段，但从原嵌套写法的逻辑可以看出，addToCart调用成功后你并没有用到它的返回值，而是直接复用了之前已经查询到的cart_ID，说明addToCart接口大概率不会返回购物车ID，导致第二个switchMap解构得到的cart_ID为undefined。

addToCartFixed() {
  const { quantity } = this.productForm.value;
  const sessionCart = sessionStorage.getItem('cart_Session');

  this.cartService
    .retrieveCart(sessionCart!)
    .pipe(
      switchMap(({ id: cart_ID }: Cart) => {
        console.log('SwitchMap', cart_ID);
        console.log('Cart Already init');
        // 调用加购接口后把已有的cart_ID传递到下游
        return this.cartService.addToCart(
          cart_ID,
          this.product_ID,
          quantity,
          this.variant_Data
        ).pipe(
          // 忽略加购接口的返回值，只传递cart_ID给后续操作
          map(() => cart_ID)
        );
      }),
      switchMap((cart_ID) => {
        // 直接使用上游传递的cart_ID查询最新购物车数据
        return this.cartService.retrieveCart(cart_ID);
      })
    )
    .subscribe({
      next: (items) => {
        console.log('SwitchMap Final True : ', items);
        // 原有业务逻辑更新
        this.cart_Items = items.line_items;
        this.total_Items = items.total_unique_items;
        this.cartService._totalItems$.next(this.total_Items);
        // 此处可补充成功弹窗逻辑
      },
      error: (err) => {
        console.log('Error in Request !!!', err);
      },
      complete: () => {
        console.log('Add to Cart Finish.');
      }
    });
}

• 修复后完全对齐原有嵌套写法的功能，没有额外逻辑变动
• 如果你需要避免用户快速点击时前序加购请求被自动取消，可以把switchMap替换为concatMap，会按请求触发顺序依次执行
• 如果你的addToCart接口本身就会返回最新的购物车数据，可以直接去掉第二个switchMap，直接处理addToCart的返回值即可，进一步简化代码

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