如何异步填充集合？

Question

我试图通过以异步方式将产品添加到每个超市来填充超市集合。

我们的目标是不再拥有这样的东西：

[{
    name: 'supermarket x',
    products: [1, 2]
}]

更像这样的东西：

[{
    name: 'supermarket x',
    products: [{
        id: 1,
        name: 'cacao'
    }, {
        id: 2,
        name: 'milk'
    }]
}]

我必须为此编写基本代码，但我无法实现在完成后用第二个流填充第一个流。

有什么想法吗？

我在这里留下了一个带有结构的JSBin，以便您可以更快地使用它

https://jsbin.com/nucutox/1/edit?js,console

谢谢!

Answer 1

因此，您有一个getSupermarkets()函数和一个getProduct(id)函数，前者返回一个流，该流发出多个超市对象，后者返回一个流，该流发出具有指定id的单个产品，然后完成。您希望将包含产品ids的超市流映射到包含“已解析”产品对象的超市流。我说对了吗？

这是我的解决方案：

const supermarkets$ = getSupermarkets()
    .concatMap(supermarket => {
        const productStreams = supermarket.products
            .map(productId => getProduct(productId));

        return Rx.Observable.combineLatest(productStreams)
            .map(products => Object.assign({}, supermarket, { products }));
    });

supermarkets$.subscribe(x => console.log(x));

当新的超市对象到达时，我们首先将其产品ids数组映射到产品可见数组，即Array<Id> => Array<Observable<Product>>。然后，我们将该数组传递给combineLatest操作符，该操作符将等待，直到每个可见对象产生一个值并发出这些值的数组，即产品对象的数组。然后，我们生成一个新的超市对象，并将products设置为数组。我们希望保持原始的supermarket对象不变，这就是Object.assign的原因。

为了让它工作，我不得不稍微更新一下你的getProduct()实现:使用.of(product)操作符而不是.from(product)，因为product是我们想要发出的一个普通对象。