Javascript 根据可观测元素的性质解析可观测项

如果我有一个可以从api中观察到的项目列表，那么让我们称它们为“条列表”

现在，对于每个

bar

，我需要获取相关项目的列表——让我们称它们为“foo”s。这里有一件事-只有当提供了相关的

bar

id时，api才允许您检索

foo

的列表

那我该怎么做呢？我是否应该在

订阅| forEach

中单独发出请求？或者我可以创建URL流，并以某种方式将它们与

条流

合并，这样做

当应用于UI时，您可以使用Rx创造奇迹，不幸的是，我很难使用它处理多个ajax请求

你能给我举一个例子，当你有一个可观察的，并且对于每一个项目，你能检索到更多的数据吗

例如，如果我尝试这样做：

Rx.Observable.fromArray([ { bar:1 }, { bar:2 }, { bar:3 } ])
.map((x)=> {
    x.foo = Rx.Observable.fromPromise(grabFoo(x));

    return x;
}).subscribe((x)=> console.log(x))

---

这是行不通的。那么我该如何做这样的事情呢？

我就是这么做的。我用的是平面地图

以下是我的工作代码的修订形式：

更新了注释，并使用Bar和Foo以及addlistofBars（）

此平面贴图采用条形阵列，并分别发射每个条形

    .flatMap(function (ep) { return (_a = Rx.Observable).of.apply(_a, ep); var _a; })

此flatMap获取每个条，并使用条中的fooId发出新的web请求

    .flatMap(function (bar) { return getDataForFoo(data, bar, apiKey); })

上面的示例将bar和foo累积到一个数据模型中。您似乎需要一个包含foo的条流。鉴于上述情况，这看起来像：

var barswithfoo = listOfBars(apiKey)
    .flatMap(bar => { 
        return getFoo(bar.fooId, apiKey)
            .map(foo => {
                bar.foo = foo; 
                return bar;
            });
    })
    .subscribe();

---

您可以看到，这与您发布的答案类似。flatMap是映射+合并。它期望映射返回一个可观察对象，并立即订阅返回的每个可观察对象。

因此，为了实际实现类似的功能，我首先尝试了以下方法：

listOfbars.flatMap(x => 
     getFoo(x).then(r => {
         x.foo = r;
         return x; 
     })
)
.subscribe(x => console.log(x))

与此相比，它的工作速度非常缓慢（因为我认为它最终只能解决所有承诺）：

listOfbars.flatMap(x => 
     Rx.Observable.fromPromise(getFoo(x))
     .map(r => { 
          x.foo = r; 
          return x; 
      })
)
.subscribe(x => console.log(x))

---

看起来第二个片段甚至不应该起作用，令人惊讶的是它确实起作用了

你能解释一下这里发生了什么吗<代码>名称，

名称

，

dataForName

，

dataForNames

。我有点困惑。这里的“入口点”是什么？你能告诉我什么是

share（）

，你为什么需要这里吗？当然。名称是问题中的一组bar对象，而每个名称都是一个foo对象。入口点是getDataForNames，它返回一个Observable，每次更改时（通过添加名称或错误）都会发出数据变量。我用它来更新一个redux存储，然后触发一个react组件来呈现一组名称。在.apply的

上，你完全失去了我的东西：（share（）与publish（）相同。refCount（）这允许多个订阅共享一个Ajax调用的结果。是的，第二个是我的答案的一个很好的翻译，只返回每个bar+foo，而不是将所有的bar累积到一个数据对象中。我更新了我的答案以使其更清晰。
listOfbars.flatMap(x => 
     Rx.Observable.fromPromise(getFoo(x))
     .map(r => { 
          x.foo = r; 
          return x; 
      })
)
.subscribe(x => console.log(x))