将MergeMap与从另一个可观察的-RxJs角接收的数据数组一起使用

Question

我有一个fetchDrives方法，该方法将返回一个可观察的对象，订阅时将返回一个驱动器列表

this.fetchDrives(points).subscribe(drives => {
     console.log(drives);
});

假设我订阅的驱动器阵列看起来像这样

[ {driveId: 1}, {driveId: 2}, {driveId: 3} ]

现在我需要一个接一个地使用driveId并通过将driveId传递给每个api调用来进行三个调用（三个，因为drives数组的长度是3。我需要一次将driveId传递给以下方法，并获得纬度和经度，并将三个调用的结果存储在数组中。

this.getLatLong(driveId).subscribe( res => console.log(res))

res将包含类似{ lat: 12, lon: 54 }的对象

我不想进行两个订阅，有一种方法可以使用Rxjs运算符，并使用以前的可观察结果通过一个订阅实现此目的，遍历drives数组，并使用以下命令对getLatLong方法进行三个调用mergeMap，因为调用顺序无关紧要并将这三个调用的结果存储在数组中？

我尝试使用扫描运算符来遍历，但未能使用它来获得所需的输出

感谢您的提前帮助：）

Answer 1

如果我正确理解了您的问题，则希望展平驱动器阵列以迭代每个驱动器，然后进行API调用以获取每个驱动器的延迟时间。

您可以使用mergeAll和mergeMap运算符来实现。您的代码应如下所示：

fetchDrives().pipe(
  mergeAll(), // Flatten the drives array
  mergeMap(drive => getLatLong(drive)) // Get each drive { lat, lon }
).subscribe(console.log)

您可以在this stackblitz中运行完整的示例

Answer 2

如果请求的顺序无关紧要，则可以使用RxJS forkJoin方法同时进行调用。尝试以下操作

locations: any = [];

this.fetchDrives(points).pipe(
  switchMap((drives) => {
    return forkJoin(drives.map(drive => ({drive['driveId']: this.getLatLong(drive['driveId'])})))
  })
).subscribe(
  response => {
    this.locations = response;
  },
  error => {
    // handle error
  }
);

locations的格式为

// driveId: { lat: 12, lon: 54 }

{
  '1': { lat: 12, lon: 54 },
  '2': { lat: 12, lon: 54 },
  '3': { lat: 12, lon: 54 }
}