如何通过RxJS执行多请求并同时获取结果与原请求项？

我来帮你搞定这个问题！你想要的核心就是把每个Ajax请求的结果和对应的原数组元素绑定在一起，之前的思路方向是对的，但细节上没处理好——第二个尝试里this.ajaxAlike(i.url)只是被包装成了一个Observable，但没有被实际订阅执行，所以请求没发出去。

下面是正确的实现方式：

首先，你的原数组保持不变：

arrActions: Array<Item> = [
  { url: 'http://1.com', data: '5' },
  { url: 'http://2.com', data: '6' },
  { url: 'http://3.com', data: '7' }
];

然后使用RxJS的mergeMap + map组合，在请求完成后把结果和原元素合并：

from(this.arrActions).pipe(
  mergeMap((originalItem) => 
    // 先发起Ajax请求，再用map把结果和原元素打包
    this.ajaxAlike(originalItem.url).pipe(
      map((ajaxResponse) => ({
        original: originalItem, // 原数组元素，包含url和data
        response: ajaxResponse  // Ajax请求的返回结果
      }))
    )
  )
).subscribe((combinedResult) => {
  // 这里就能同时拿到原元素和请求结果了
  console.log(`处理的是URL: ${combinedResult.original.url}`);
  console.log(`原数据是: ${combinedResult.original.data}`);
  console.log(`请求返回结果:`, combinedResult.response);
});

关键说明： #

• mergeMap会自动订阅内部的this.ajaxAlike()返回的Observable，所以请求会正常执行。
• 通过内部的map操作符，我们把原元素和请求结果合并成一个新对象，这样在subscribe回调里就能清晰区分每个结果对应的是哪个请求。
• 如果需要按顺序串行执行请求（一个完成再发下一个），可以把mergeMap换成concatMap；如果需要限制并发请求数量，给mergeMap加第二个参数就行，比如mergeMap(fn, 2)表示同时最多跑2个请求。

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