Angular 5中用RxJs Observable实现Promise.all等价功能遇请求未触发问题

嘿，我来帮你搞定这个问题！在Angular 5里用RxJS实现类似Promise.all的功能，核心问题其实是Observable的惰性特性——和Promise一经创建就自动执行不同，RxJS的冷Observable（比如http.post返回的）只有在被订阅的时候才会真正发起请求。你之前的代码应该是没正确订阅，或者用错了操作符，导致请求根本没触发。

下面给你一步步的解决方案：

1. 用forkJoin替代Promise.all #

RxJS里的forkJoin就是对应Promise.all的操作符，它会等待所有传入的Observable都完成，然后返回一个包含所有请求结果的数组，和Promise.all的行为完全一致。

2. 完整代码实现 #

先把你的代码补全并修正：

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

// 你的数据和请求方法
let selected = [{channel: 1},{channel: 2},{channel: 3}];

postToDB(item: any): Observable<any> {
  return this.http.post('/api/items/', item);
}

submitAll() {
  // 把每个待提交的项转换成Observable
  const submitObservables = selected.map(item => {
    return this.postToDB(item)
      .pipe(
        // 解析响应（Angular 5的Http服务返回的是Response对象，需要转成JSON）
        map(res => res.json()),
        // 可选：处理单个请求的错误，避免一个失败导致全部终止
        catchError(error => {
          console.error(`提交channel ${item.channel}失败:`, error);
          return of(null); // 返回默认值，让forkJoin继续等待其他请求完成
        })
      );
  });

  // 关键：订阅forkJoin返回的Observable，触发所有请求
  forkJoin(submitObservables)
    .subscribe(
      results => {
        console.log('所有提交完成！结果数组:', results);
        // results里的每个元素对应selected数组中对应项的请求结果
      },
      globalError => {
        console.error('全局错误（未被单个请求捕获的错误）:', globalError);
      }
    );
}

3. 核心注意点 #

• 必须订阅：这是最容易忽略的点！Observable是惰性的，只有调用.subscribe()后，才会真正发起HTTP请求。你之前的代码可能只是创建了Observable数组，但没订阅，所以请求根本没触发。
• forkJoin的行为：默认情况下，只要有一个请求失败，forkJoin就会立即触发错误回调，并且取消其他未完成的请求。如果想让其他请求继续执行，就像上面代码里那样，用catchError包裹每个请求，返回一个默认值。
• 操作符导入：Angular 5对应的RxJS版本是5.x，要确保正确导入所需的操作符，不然会报错。

4. 如果你需要逐个处理请求结果（而非等待全部完成） #

如果你的需求不是等待所有请求完成才处理，而是每个请求完成就立即处理，可以用forkJoin的替代方案：merge或者concat。比如：

import { merge } from 'rxjs/observable/merge';

// ...

submitAll() {
  const submitObservables = selected.map(item => {
    return this.postToDB(item)
      .pipe(
        map(res => res.json()),
        catchError(error => {
          console.error(`提交channel ${item.channel}失败:`, error);
          return of(null);
        })
      );
  });

  merge(...submitObservables)
    .subscribe(
      singleResult => {
        console.log('单个请求完成:', singleResult);
      },
      error => {
        console.error('错误:', error);
      },
      () => {
        console.log('所有请求都完成了');
      }
    );
}

这个方案会同时发起所有请求，每个请求完成就立即触发回调，最后所有请求完成后触发complete回调。

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