如何用Promises或Observables并行请求并逐个更新状态？

一、使用Promise实现 #

不用依赖Promise.all（它会等待所有请求完成），直接给每个请求的Promise单独绑定完成回调即可。所有请求会在调用http.get时同时发起，每个请求完成后立刻执行状态更新。

代码示例：

// 批量创建请求Promise，此时所有请求已同时发起
const requestPromises = [
  http.get(obj1.product_id),
  http.get(obj2.product_id),
  http.get(obj3.product_id),
  http.get(obj4.product_id)
];

// 为每个Promise绑定独立的完成回调
requestPromises.forEach((promise, idx) => {
  const sourceKey = `source${idx + 1}`;
  promise
    .then(response => {
      // 单个请求完成，立即更新对应状态
      updateClientState(sourceKey, response);
    })
    .catch(err => {
      // 单独处理该请求的错误，不阻塞其他请求
      updateClientState(sourceKey, { error: err.message });
    });
});

原理：调用http.get后请求就已发送，所有请求并行执行；每个Promise的then/catch会在自身请求完成后立即触发，无需等待其他请求。

二、使用Observable（RxJS）实现 #

如果用RxJS，不要用forkJoin（等待所有Observable完成），而是用merge操作符合并多个请求Observable，它会在每个源Observable发出数据时立即触发回调。

代码示例（带请求标识）：

import { merge, map } from 'rxjs';

// 给每个请求Observable附加标识，方便后续区分
const requestObservables = [
  http.get(obj1.product_id).pipe(map(res => ({ key: 'sourceOne', data: res }))),
  http.get(obj2.product_id).pipe(map(res => ({ key: 'sourceTwo', data: res }))),
  http.get(obj3.product_id).pipe(map(res => ({ key: 'sourceThree', data: res }))),
  http.get(obj4.product_id).pipe(map(res => ({ key: 'sourceFour', data: res })))
];

// 合并所有Observable，单个请求完成就触发更新
merge(...requestObservables).subscribe({
  next: ({ key, data }) => {
    updateClientState(key, data);
  },
  error: err => {
    // 处理单个请求的错误，其他请求不受影响
    console.error('请求失败:', err);
  },
  complete: () => {
    // 可选：所有请求都完成后执行的逻辑
    console.log('全部请求处理完毕');
  }
});

原理：merge会同时订阅所有输入的Observable，只要任意一个Observable发出数据（请求完成），就会立刻调用next回调执行状态更新，完全符合需求。

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