Angular：实现多请求响应到达即展示

要实现每个请求响应一到达就立即展示，你需要用merge操作符替代forkJoin——它会同时订阅所有请求Observable，并且每个请求完成时立刻发射对应的结果，无需等待其他请求。

修改后的组件代码 #

import { merge } from 'rxjs';
import { map } from 'rxjs/operators';

class MyComponent implements OnInit {
  response: any[] = []; // 先初始化空数组，避免push报错
  idsToQuery = [1, 2, 3, 5, 8];

  ngOnInit() {
    // 可选：给每个请求绑定对应的ID，方便后续关联数据
    const requests = this.idsToQuery.map(i => 
      this.myService.getDataById(i).pipe(
        map(res => ({ id: i, data: res }))
      )
    );

    merge(...requests).subscribe(result => {
      // 每次收到单个请求的响应，直接添加到数组中
      this.response.push(result);
      // 如果不需要关联ID，直接push(res)即可
    });
  }
}

为什么之前的操作符不适用 #

• forkJoin：必须等待所有请求全部完成后，才会一次性返回所有结果的数组，所以会被最慢的请求卡住。
• zip：会按顺序配对每个Observable的发射值，比如必须等第1个请求和第2个请求都返回第一个值，才会合并发射，同样无法实时展示单个结果。
• combineLatest：需要所有Observable都至少返回过一次结果后，才会在后续有新结果时合并所有最新值，第一个结果要等所有请求都完成一次才会出现，不符合需求。

额外说明 #

如果需要保持界面上的展示顺序（比如按ID顺序），可以在收到结果后对response数组进行排序；如果不需要顺序，直接用merge的方式就完全满足需求。

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