Question

我有3个依赖的Rest API资源（可观察到），如下所示：

第一个可观察对象将一项作为用户数组生成，例如：

getUsers(): Observable<User[]>
    [
      {
        "id": 1,
        "name": "Peter",
        "surname": "Smith"
      },
      {
        "id": 2,
        "name": "John",
        "surname": "Wayne"
      },
      ...
    ]

第二个可观察对象可用于获取分配给用户的地址，因此输入参数为用户ID，并以地址数组的形式返回一项：

getUserAddresses(user_id: string): Observable<Address[]>
    [
      {
        "id": 1,
        "city": "London",
        "street": "Wicombe 34"
      },
      {
        "id": 2,
        "city": "Paris",
        "street": "La fever 20"
      },
      ...
    ]

第三观察者可用于获取分配给用户的公司，因此输入参数为用户ID，并以公司数组的形式返回一个项目：

getUserCompanies(user_id: string): Observable<Company[]>
    [
      {
        "id": 1,
        "name": "Fintch CO",
        "state": "France"
      },
      {
        "id": 2,
        "name": "C&C inc.",
        "state": "USA"
      },
      ...
    ]

我想将这三个可观察值链接到一个，将其作为一项再次产生结果，其中将包含用户数组及其附加地址数组和公司数组，如下所示：

    [
      {
        "id": 1,
        "name": "Peter",
        "surname": "Smith",
        "addreesses": 
               [
                 {
                   "id": "1",
                   "city": "London",
                   "street": "Wicombe 34"
                 },
                 {
                   "id": "2",
                   "city": "",
                   "street": "La fever 20"
                 }
               ],
        "companies": 
               [
                 {
                   "id": "1",
                   "name": "Fintch CO",
                   "state": "France"
                 },
                 {
                   "id": "2",
                   "name": "C&C inc.",
                   "state": "USA"
                 }
               ]
        }
      },
      {
        "id": 2,
        "name": "John",
        "surname": "Wayne",
        "addresses": [...],
        "companies": [...],
      },
      ...
    ]

使用RxJ 6在Angular 6中如何实现组合运算符？非常感谢您的建议。

Answer 1

类似的事情可能会起作用

getUsers()
.pipe(
  switchMap(users => from(users)),
  mergeMap(user => forkJoin(getAddresses(user.id), getCompanies(user.id))
                   .pipe(map(data => ({user, addresses: data[0], companies: data[1] })))
  tap(data => data.user.addresses = data.addresses),
  tap(data => data.user.addresses = data.companies),
  map(data => data.user),
  toArray()
  )
)

将类似的链应用于不同的用例here。

Answer 2

要链接可观察对象，可以使用flatMap函数。此函数就像promises一样，意味着该函数仅在可观察对象解析为值后才执行。

还有一个名为forkJoin的可观察函数，该函数可让您等待所有异步请求均已解析为一个值。

示例：

getUsers().flatMap((users) => {
    // the users variable is the list of users
    var multipleObservables = [];
    users.forEach((u) => {
      multipleObservables.push(
         getUserAddresses(u.id).map((usersAddresses) => {
            u.addresses = usersAddresses;
            return u;
         });
      );
    });
    return forkJoin(multipleObservables);
}).flatMap((usersWithAddresses) => {
    // the usersWithAddresses variable is an array of users which also have their addresses
    var multipleObservables = [];
    usersWithAddresses.forEach((u) => {
       multipleObservables.push(
          getUserCompanies(u.id).map((usersCompanies) => {
             u.companies = usersCompanies;
             return u;
          });
       );
    });
    return forkJoin(multipleObservables);
});

您可以编写类似这样的内容来链接您的请求并扩展用户对象。

Answer 3

以下是用于组合的运算符，它们在数组（reference）中发出结果：

combineAll
combineLatest
forkJoin
pairwise
zip（我建议的解决方案）

我建议您给他们所有的书，以弄清您的喜好并为您的情况找到最佳选择。

希望这会有所帮助！

角度6管道RxJs运算符可链接3个相关的可观测对象

3 个答案: