如何使用map、forkjoin和mergemap答案

【问题标题】：how to use map, forkjoin and mergemap如何使用map、forkjoin和mergemap
【发布时间】：2020-07-02 14:14:12
【问题描述】：

我需要进行不同的 API 调用。

第一个 API 调用返回 info 具有 userId、propertyId 的对象列表

对于每个项目，我需要根据第一次 API 调用返回的 ID 获取 userInfo 和 propertyinfo。

最后它必须返回info，userInfo，popertyInfo。

我想编写一次订阅方法以在ts 文件中进行这些 API 调用。

this.service.getInfo().subscribe((data) => {console.log('should list all the information')} //应该打印信息、用户信息、属性信息

我有以下代码：

getInfo() {
  return this.http.get().pipe(
    mergeMap((info) => {

    })
}

第一个API：

[
    {
        info: 'some info 1',
        userId: 1,
        propertyId: 4,
    },
    {
        info: 'some info 2',
        userId: 2,
        propertyId: 5,
    },
    {
        info: 'some info 3',
        userId: 3,
        propertyId: 6,
    },
];

每隔一个api：（从第一个API调用的每个数组元素中获取userId）

{
    userName: 'asdasd',
    age: 34
}

每第三个 API 调用：（从第一个 API 调用的每个数组元素中获取 propertyId）

{
    propertyName: 'adasd',
    otherProps: ''
}

最终响应应该是这样的

res = 
[
    {
        info: 'some info 1',
        userId: 1,
        propertyId: 4,
        userName: 'asdasd',
        age: 34,
        propertyName: 'adasd',
        otherProps: ''
    },

    {
        info: 'some info 2',
        userId: 2,
        propertyId: 5,
        userName: 'a',
        age: 34,
        propertyName: 'b',
        otherProps: ''
    },
    ...
    ...
]

【问题讨论】：

对我来说，最终的结果还不清楚。你能提供信息（第一个响应）、第二个响应数据和输出数据的模拟吗？
@ВалерийГерасимов 我已经更新了我的问题，看看，如果可以的话，请帮助我。

标签： angular observable

【解决方案1】：

你可以用下一个方法：

getInfo() {
    return this.http.get().pipe(
        mergeMap((info: {userId: number, propertyId: number}[]) => {
            const userIdRequests = info.map(item => this.http.get(`/second-api/${item.userId}`));
            const propertyIdRequests = info.map(item => this.http.get(`/third-api/${item.propertyId}`));
            const userIdData$ = forkJoin(userIdRequests);
            const propertyIdData$ = forkJoin(propertyIdRequests);
            return forkJoin([userIdData$, propertyIdData$]).pipe(
                map(([userIdList, propertyIdList]) => {
                    const result = [];
                    info.forEach((infoItem, index) => {
                        const resItem = {
                            ...infoItem,
                            ...userIdList[index],
                            ...propertyIdList[index]
                        };
                        result.push(resItem);
                    });
                    return result;
                })
            )
        })
    )
}

这里使用mergeMap返回新的observable而不是第一个。

forkJoin 用于等待所有请求结束，并用于对请求进行分组（按 API 调用类型、用户或属性）

map 函数用于将我们拥有的三个数组(info, userIdInfo, propertyIdInfo) 转换为预期结果。

我对您的 API 调用 URL 做了一些假设。变量名称来自您的域。但关键概念是展示。

【讨论】：