RXJS Angular 5的管道操作符顺序

Question

RXJS Angular 5的管道操作符顺序

4

是我还是我的运算符顺序不正确？在下面的代码中，控制台日志中的两个水龙头返回相同的值。那肯定是不对的，对吧？

return this.pcs.getAvailableMaterials(currentProduct.id).pipe(
            map(
                result => result.result.data
            ),
            tap(
                x => console.log(x, 'before')
            ),
            map(
                materials => {
                    materials.forEach(material => {
                        material.type = 'material'
                    })
                    return materials
                }
            ),
            tap(
                x => console.log(x, 'after')
            ),
            tap(
                materials => {
                    setState({
                        ...state,
                        availableMaterials: materials
                    })
                }
            )
        )

使用NGXS开发的Angular 5应用程序。

- Dirk

this.pcs.getAvailableMaterials(currentProduct.id)的类型是什么？它是一个RXJS observable吗？ - ethan.roday

你能否制作一个演示，展示一下结果与期望不符的情况？ - martin

@err1100 是的，该函数返回一个可观察对象（HTTP 调用）。 - Dirk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ethan.roday · Accepted Answer

请注意，@samanime的答案不正确。请考虑对您原始代码进行以下修改：

return this.pcs.getAvailableMaterials(currentProduct.id).pipe(
        ...
        tap(
            x => console.log(x, 'before')
        ),
        map(
            materials => {
                materials.forEach(material => {
                    material.type = 'material'
                })
                return materials
            }
        ),
        delay(1000), // this line is new
        tap(
            x => console.log(x, 'after')
        ),
        ...
    )

您仍然可以将两个日志视为相同。对于@samanime的答案正确，console.log必须以某种方式需要花费一秒钟来执行，这显然不是事实。

问题在于RXJS期望管道函数是纯的。也就是说，没有任何管道函数应该创建任何在该函数执行之外持续存在的副作用。在您的第一个map调用中，您会改变materials数组内的对象，然后返回对相同数组的引用。这是一种副作用。要解决此问题，您应该从第一个map调用中返回一个新的数组。例如：

map(
  materials =>
    materials.map(material => { // map instead of forEach makes a new array
      return {...material, type: 'material'} // object spread makes new objects
    })
)

这应该能够给您预期的结果。