我需要调用2个不同的Web服务。第一个返回有关城市的信息(ID,名称,州,人口和其他统计信息)。第二项服务按城市返回酒店列表(酒店名称,城市,州和有关酒店的其他信息)。
我想从这两种服务中获取数据并将它们合并到一个对象数组中,我还需要按城市和州来匹配这两个调用。
我不确定执行此操作的正确方法。
我试图分别调用每个服务,并使用传播运算符合并数据,但是我不知道如何在每个结果集中对齐记录。
我想知道是否可以使用RXJS进行这种数据合并。 我希望有两个通话的所有属性的对象
答案 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;
});
}
}