RXJS 可观察量 - 对每个索引值和合并结果的 http 调用

Question

我做了一个http调用来获取一个带有objs的数组。现在我想为每个返回ID的 objs 调用另一个 http 调用。毕竟，我希望有一个可观察的结果。

到目前为止，我设法为每个索引获取了一个 http 调用。问题而不是一个结果，我得到了多个结果。

getStats(tag: string) {
return this.service.getClanByClanTag(tag)
.map(clan => {
return clan.memberList; //the arr that return the ID's
})
.switchMap((member: PlayerByMemberListType[]) => {
return member; // singleObj of the arr
})
.concatMap((singleMember) => {
return this.service.getPlayerData(singleMember.tag).map(player => {
//push data to the new arr which should return only one time
this.newArr.push({
tag: singleMember.tag,
name: singleMember.name,
warStars: player.warStars,
trophiesNightBase: singleMember.versusTrophies
});
return this.newArr;
});
});
}

这是控制台在订阅后打印的内容：

Array [ {…} ]
Array [ {…}, {…} ]
Array(3) [ {…}, {…}, {…} ]
Array(4) [ {…}, {…}, {…}, {…} ]
Array(5) [ {…}, {…}, {…}, {…}, {…} ]
...

我知道我需要某种Observable.forkJoin但我不知道如何将它集成到代码中。

Answer 1

尝试这样的事情：

this.service.getClanByClanTag(tag)
.mergeMap(clan => clan.memberList)
.mergeMap(
member => this.service.getPlayerData(member.tag), // supposedly this returns an observable
(member, player) => ({ 
tag: member.tag,
name: member.name,
warStars: player.warStars,
trophiesNightBase: member.versusTrophies
})
)
.toArray()

Answer 2

所以基本上你想要实现的是这个。

1. 获取军团信息
2. 使用步骤 1 中的军团信息，获取军团中的memberList
3. 对于memberList内的每个成员，获取玩家

您需要想出一种方法来在step2step3switchMap之前保留信息。通常我们会使用Subject，但是如果您不想这样做，只需mapObservable即可保留数据：

getStats(tag: string) {
return this.service.getClanByClanTag(tag)
.map(clan => {
return clan.memberList; //the arr that return the ID's
})
.switchMap((memberList: PlayerByMemberListType[]) => {
//note that the following map is a function of javascript array, not Observable
//it returns an array
let arrayOfObservables = memberList.map(singleMember => {
this.service.getPlayerData(singleMember.tag)
//map the data so as to preserve the data of singleMember 
//by creating a new object, using Object.assign
.map(playerData => {
return Object.assign({memberData: singleMember}, playerData,)
});
})
return Observable.forkJoin(arrayOfObservables);
})
.map(players => {
//players is an array of Object that is the format of {memberData:singleMember, playerData:player)
//perform Object destructuring method
return players.map(({memberData,playerData}) => {
return {
tag: memberData.tag,
name: memberData.name,
warStars: playerData.warStars,
trophiesNightBase: memberData.versusTrophies
}
})
})
}