Ionic3+Angular5中forEach内Observable执行后数组为空问题

兄弟，这个问题我太熟了！你踩的是异步操作和同步代码执行顺序的坑——你写的forEach是同步跑完的，但里面的this.cardProvider.stockbyarticle(data).subscribe()是异步的HTTP请求，等你在循环外面检查articlepanier的时候，所有的subscribe回调都还没执行呢，数组当然是空的！

核心思路：用forkJoin等待所有异步请求完成 #

Angular的RxJS里有个forkJoin操作符，专门用来处理多个Observable，它会等待所有传入的Observable都完成后，才会把所有结果一次性返回给你。这样就能保证你在处理articlepanier的时候，所有的请求都已经拿到结果了。

修改后的完整代码 #

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

// ... 你的其他代码 ...

articlepanier : Article[] = [];
this.storage.get(TOKEN_KEY).then(token => {
  let isExpired = helper.isTokenExpired(token);
  if(!isExpired){
    // 1. 先把每个购物车项对应的Observable请求收集起来
    const requestObservables = this.cart.map((element, index) => {
      // 初始化当前商品对象
      const article = new Article();
      article.artid = element.artid;
      article.artcode = element.artcode;
      article.plvqteuv = element.amount;
      article.plvqtyisvalid = true; // 默认设为有效，不符合条件再修改

      const data = { pricode: this.pricode, artcode: element.artcode };

      // 返回一个Observable，把请求结果、当前商品和索引绑定在一起
      return this.cardProvider.stockbyarticle(data).pipe(
        map(res => ({ res, article, index })),
        // 可选：处理单个请求失败的情况，避免整个forkJoin崩溃
        catchError(err => {
          console.error(`获取商品${element.artcode}库存失败:`, err);
          article.plvqtyisvalid = false; // 失败时标记为无效
          return of({ res: null, article, index });
        })
      );
    });

    // 2. 用forkJoin等待所有请求完成
    forkJoin(requestObservables).subscribe(allResults => {
      // 3. 遍历所有请求结果，填充articlepanier数组
      allResults.forEach(({ res, article, index }) => {
        // 检查库存是否足够
        if(res && res.quantity < article.plvqteuv){
          article.plvqtyisvalid = false;
        }
        this.articlepanier.splice(index, 0, article);
      });

      // 4. 现在这里可以安全地使用articlepanier了！
      console.log('最终的购物车商品数组:', this.articlepanier);
      const validArticles = this.articlepanier.filter(c => c.plvqtyisvalid === true);
      if(validArticles.length > 0){
        // 执行购物车入库的逻辑
        console.log('开始入库有效商品:', validArticles);
      }
    });
  }
});

关键说明 #

1. forkJoin的作用：它会等待所有传入的Observable都完成后，才触发回调，此时所有库存请求的结果都已经拿到，articlepanier也被正确填充。
2. map操作符的作用：把每个请求的结果和对应的商品对象、索引绑定，这样在回调里能准确对应到每个购物车项。
3. 错误处理：用catchError处理单个请求失败的情况，避免因为一个请求出错导致整个流程中断，同时标记该商品为无效。
4. 顺序一致性：forkJoin返回的结果数组顺序和你传入的requestObservables顺序完全一致，也就是和原cart数组的顺序一致，不会出现顺序混乱的问题。

为什么原来的写法不行？ #

原来的forEach是同步执行的，循环跑完的时候，所有的subscribe都还在等待HTTP响应，这时候articlepanier还没有被任何回调填充，所以你在循环外的判断自然拿不到数据。

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