rxjs，如何合并多个请求，并行请求中的一个串行请求，得到一个结果

Question

for example, I have 2 API service, returning type is Observable.

function add(row) {
    let r = Math.ceil(Math.random() * 2000);
    let k = row + 1;
    return timer(r).pipe(mapTo(k));
}

function mutiple(row) {
    let r = Math.ceil(Math.random() * 2000);
    let k = row * 10;
    return timer(r).pipe(mapTo(k));
}

there is an array [1, 2, 3, 4, 5] , I use the two function as follow:

from([1, 2, 3, 4, 5]).pipe(
        mergeMap((row) => {
            return add(row);
        }),
        mergeMap((row) => {
            return mutiple(row);
        }),
        toArray()
    ).subscribe((_) => {
        console.log("sub", _);
    });

the result is

sub [ 50, 20, 60, 40, 30 ]

the answer is that I want.

however, I don't know the source of the element of the array, I hope the result is

[ [4, 50], [1, 20], [5, 60], [3, 40], [2, 30] ] 

or

[
  { sourceData: 4, result: 50 },
  { sourceData: 1, result: 20 },
  ...
]

if I use contactMap to keep the sequence, the program will execute one by one, I don't care the sequence, I just wanna know how to connect the source and the result.

Thank you so much~

Answer 1

Try it in this way?

  from([1, 2, 3, 4, 5]).pipe(
    mergeMap((row) => {
      const index$ = of(row);
      return forkJoin([index$, add(row)]);
    }),
    mergeMap(([index, row]) => {
      return forkJoin([of(index), mutiple(row)]);
    }),
    toArray()
  ).subscribe((_) => {
    console.log("sub", _);
  });

or

  const handler = v => {
    return of(v).pipe(
      mergeMap((row) => {
        return add(row);
      }),
      mergeMap((row) => {
        return mutiple(row);
      }),
    )
  }

  from([1, 2, 3, 4, 5]).pipe(
    mergeMap(row => forkJoin([of(row), handler(row)])),
    toArray()
  ).subscribe((_) => {
    console.log("sub", _);
  });