RXJS Observables - 每个索引值和合并结果的 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 中的每个成员，获取玩家

您需要想办法在switchMap 之前的step3 中保留step2 的信息。通常我们会使用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
                }
            })
        })
}