如何在 RxJs 中發出多個嵌套的 http 請求？

Question

我是 RxJs 的新手。 我找不到怎么做。 我的主數據中有大量嵌套的 http 請求。 我想獲取所有 http 請求並將它們全部合並到我的主要 stream 中。

我的示例主要 stream 數據為：

[
    {
        id: '123',
        name: 'nameVal1',
        salary: [
            { href: 'http://example.com/salary/1' },
            { href: 'http://example.com/salary/2' }
        ],
        address: {
            href: 'http:/example.com/address'
        }
    },

    {
        id: '456',
        name: 'nameVal2',
        salary: {
            href: 'http://example.com/salary/1'
        },
        address: {
            href: 'http:/example.com/address'
        }
    }
];

工資示例 object：

{
    salary: '1000€',
    month: 2
}

示例地址 object：

{
    country: 'UK',
    city: 'London',
    postalCode: '123'
}

我的主要 stream 是像上面這樣的對象數組，在獲得主要的 stream 之后，我想獲取所有嵌套數據並將它們組合起來，就像這樣：

[
{
    id: '123',
    name: 'nameVal1',
    salary: [
        {
            salary: '1000€',
            month: 2
        },
        {
            salary: '500€',
            month: 3
        }
    ],
    address: {
        country: 'UK',
        city: 'London',
        postalCode: '123'
    }
},

{
    id: '456',
    name: 'nameVal2',
    salary: [
        {
            salary: '2000€',
            month: 3
        }
    ],
    address: {
        country: 'UK',
        city: 'London',
        postalCode: '456'
    }
}
];


this.service.mainHttpReq().pipe(
    map(users => {
        users.salary.forEach(salaryItem => { 
            return fetch(salaryItem.href); 
        });
        

    })
).subscribe(usersData => {
   console.log('Users Data :', usersData);
});

Answer 1

正確的解決方案可能取決於您是否要同時獲取薪水，但您可以這樣做，例如：

this.service.mainHttpReq().pipe(
  concatAll(), // Unwrap the users array into individual `next` values representing each user.
  concatMap(user => // Process users in sequnece one by one.
    forkJoin( // Fetch all salaries and address for this user in parallel.
      forkJoin(user.salary.map(salary => fetch(salaryItem.href))), 
      fetch(user.address),
    ).pipe(
      map(([salaries, address]) => { // Update the original user object.
        user.salary = salaries; 
        user.address = address;
        return user;
      }),
    ),
  ),
  toArray(), // Collect into a one array of users.
).subscribe(...);

我沒有測試上面的代碼，但我希望你能明白它是如何工作的。

Answer 2

使用forkJoin並行獲取數據。

mainStream.pipe(
  // fetch data for every person
  switchMap(persons => forkJoin(
    persons.map(person => getPersonData(person))
  ))
);

// get data for a single person
function getPersonData(person): Observable<any> {
  // the salary data as an observable
  const salaryData = forkJoin(person.salary.map(({ href }) => getSalaryData(href));
  // the address data as an observable
  const addressData = getAddressData(person.address.href);
  // combine salary and address data
  return forkJoin(salaryData, addressData).pipe(
    // map salary and address data to a person object with this data
    map(([ salary, address ]) => ({ ...person, salary, address }))
  );
}