Question

我想在得到两个结果之后显示页面不同的服务调用。service1和service2是两个不同的服务

don't want to use second service call inside of first service 
subscribe.service1 and service2 are two different services.

  this.service1.getProfile1(id).subscribe((data1) => {
         console.log(data1);
    });
  this.service2.getProfile2(id).subscribe((data2) => {
         console.log(data2);
    });

我如何找到两个服务电话？

Answer 1

您可以从rxjs {{3}}中使用forkJoin

import { forkJoin } from 'rxjs';

forkJoin(
  this.service1.getProfile1(id), 
  this.service2.getProfile2(id)
).subscribe(([profile1, profile2]) => {
  console.log(profile1, profile2);
});

Answer 2

您可以通过fork合并将两个可观察对象合并：

import { forkJoin } from 'rxjs';

    forkJoin(
        [
            this.service1.getProfile1(id),
            this.service2.getProfile2(id),
        ]
    ).subscribe(r => {
        const data1 = r[0];
        const data2 = r[1];

        console.log(data1)
        console.log(data2)
    }

调用被序列化，然后可观察到的返回结果数组。项目的位置反映了您创建forkJoin的顺序。

Answer 3

实际上，在此特定用例中，您正在导航用户并尝试使用两个端点进行服务调用。从这些端点收到响应后，您将尝试将其与派生连接合并，并以可观察的方式将其发送到组件

但是在您的问题中，您正在寻找一种方法，甚至可以在重定向到页面之前进行http调用。在角度路由器中，有一个针对这种用例的好方法。

您甚至可以指定在用户进入页面之前要执行的http调用。

在您的服务级别中实施解析，并在路由解析下定义该服务。

示例：

import { Injectable } from '@angular/core';
import { APIService } from './api.service';

import { Resolve } from '@angular/router';

import { ActivatedRouteSnapshot } from '@angular/router';

@Injectable()
export class APIResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.apiService.getItems(route.params.date);
  }
}

路线：

{ 路径：“ items /：date”，组件：ItemsComponent，解决：{项目：APIResolver} }

在接到两个不同的服务电话后显示页面

3 个答案: