Question

我需要调用2个不同的Web服务。第一个返回有关城市的信息（ID，名称，州，人口和其他统计信息）。第二项服务按城市返回酒店列表（酒店名称，城市，州和有关酒店的其他信息）。

我想从这两种服务中获取数据并将它们合并到一个对象数组中，我还需要按城市和州来匹配这两个调用。

我不确定执行此操作的正确方法。

我试图分别调用每个服务，并使用传播运算符合并数据，但是我不知道如何在每个结果集中对齐记录。

我想知道是否可以使用RXJS进行这种数据合并。我希望有两个通话的所有属性的对象

Answer 1

使用CombineLatest

combineLatest(
  http.get('cityDetailsUrl'),
  http.get('hotelsInfoUrl')
).subscribe(([cityDetails, hotelsInfo]) => {
  You have access to city details and hotel info right here
});

两个调用都结束时，subscribe方法将触发。

Answer 2

我个人将首先获取城市，当您得到结果时，使用那里的信息来查询第二个服务（例如，使用第一个服务的响应中的city作为参数来发起第二个API请求），伪代码：


fetch(`https://api.number.one?city=${yourcity}`)
    .then((data) => {
        return data.json();
    })
    .then((json) => {
        let result = json;
        // use result from first request to build the second one
        fetch(`https://api.number.two?city=${result.city}`)
            .then((data) => {
                return data.json();
            })
            .then((json) => {
                // here you extract the properties you need from the second API
                // and merge them with the $result variable from the first request above
                let obj = {
                    prop1: json.prop1,
                    prop2: json.prop2,
                };

                result = {
                    ...result,
                    obj
                };
            })
           .catch(err) => {

           });
    })
    .then((json) => {
    })
    .catch(err) => {

    });

将其抽象为几个函数当然会更好...

~~，没有RxJS与可观察对象有关，并且不进行任何魔术数据合并！~~

Answer 3

您也可以使用forkJoin

当您有一组可观测值和只关心每个的最终发射值。一个常见的用例因为这是如果您希望在页面加载时发出多个请求（或其他事件），并且只希望在响应有被所有人接受。这样类似于您的使用方式 Promise.all。

learnerxjs的示例

@Injectable()
export class MyService {
  makeRequest(value: string, delayDuration: number) {
    // simulate http request
    return of(`Complete: ${value}`).pipe(
      delay(delayDuration)
    );
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>forkJoin Example</h2>
      <ul>
        <li> {{propOne}} </li>
        <li> {{propTwo}} </li>
        <li> {{propThree}} </li>
      </ul>
    </div>
  `,
})
export class App {
  public propOne: string;
  public propTwo: string;
  public propThree: string;
  constructor(private _myService: MyService) {}

  ngOnInit() {
    // simulate 3 requests with different delays
    forkJoin(
      this._myService.makeRequest('Request One', 2000),
      this._myService.makeRequest('Request Two', 1000),
      this._myService.makeRequest('Request Three', 3000)
    )
    .subscribe(([res1, res2, res3]) => {
      this.propOne = res1;
      this.propTwo = res2;
      this.propThree = res3;
    });
  }
}

如何合并2个http调用的结果

3 个答案: