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

时间:2019-06-20 23:00:02

标签: javascript angular typescript rxjs angular7

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

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

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

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

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

3 个答案:

答案 0 :(得分:1)

使用CombineLatest

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

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

答案 1 :(得分:0)

我个人将首先获取城市,当您得到结果时,使用那里的信息来查询第二个服务(例如,使用第一个服务的响应中的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与可观察对象有关,并且不进行任何魔术数据合并!

答案 2 :(得分:0)

您也可以使用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;
    });
  }
}