RxJS5 groupBy从第一组中删除第一项?

时间:2018-02-12 04:14:30

标签: reactive-programming rxjs5

我很难理解为什么这段代码会丢弃第一个元素?

const Rx = require("@reactivex/rxjs")

const requestQueue = Rx.Observable.from([
  {type: "show.json", value: "1"},
  {type: "tweets.json", value: "A"},
  {type: "show.json", value: "2"},
  {type: "tweets.json", value: "B"}
])

requestQueue.groupBy(request => request.type).bufferCount(2).mergeMap(requestSubstreams => {
  return requestSubstreams[0].merge(requestSubstreams[1])
}).subscribe(x => console.log(x))

我得到的输出是:

{ type: 'tweets.json', value: 'A' }
{ type: 'show.json', value: '2' }
{ type: 'tweets.json', value: 'B' }

做了一些实验,它总是第一个掉线的元素。

这是RxFiddle的链接:http://rxfiddle.net/#type=editor&code=Y29uc3QgcmVxdWVzdFF1ZXVlID0gUnguT2JzZXJ2YWJsZS5mcm9tKFsKICB7dHlwZTogInNob3cuanNvbiIsIHZhbHVlOiAiMSJ9LAogIHt0eXBlOiAidHdlZXRzLmpzb24iLCB2YWx1ZTogIkEifSwKICB7dHlwZTogInNob3cuanNvbiIsIHZhbHVlOiAiMiJ9LAogIHt0eXBlOiAidHdlZXRzLmpzb24iLCB2YWx1ZTogIkIifQpdKQoKcmVxdWVzdFF1ZXVlLmdyb3VwQnkocmVxdWVzdCA9PiByZXF1ZXN0LnR5cGUpLmJ1ZmZlckNvdW50KDIpLm1lcmdlTWFwKHJlcXVlc3RTdWJzdHJlYW1zID0+IHsKICByZXR1cm4gcmVxdWVzdFN1YnN0cmVhbXNbMF0ubWVyZ2UocmVxdWVzdFN1YnN0cmVhbXNbMV0pCn0pLnN1YnNjcmliZSh4ID0+IGNvbnNvbGUubG9nKHgpKQ== ...但我还没弄清楚如何解释它。

我必须使用此代码(使用分区)才能获得我期望的结果:

const requestQueue = Rx.Observable.from([
  {type: "show.json", value: "1"},
  {type: "tweets.json", value: "A"},
  {type: "show.json", value: "2"},
  {type: "tweets.json", value: "B"}
])

const requestSubstreams = requestQueue.partition(request => request.type == "show.json")
const showJsonSubstream = requestSubstreams[0]
const tweetsJsonSubstream = requestSubstreams[1]

showJsonSubstream.merge(tweetsJsonSubstream).subscribe(x => console.log(x))

你能帮忙指出groupBy的问题/注意事项吗?

1 个答案:

答案 0 :(得分:0)

要@cartant:它与此代码(在此代码中)有关,字母和数字来自不同的可观察对象。

const letterArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
const letterStream = Rx.Observable.zip(
  Rx.Observable.from(letterArr),
  Rx.Observable.range(0, letterArr.length - 1), 
  (letter, index) => Rx.Observable.of({letter, index}).delay(
    index == 0 ? 0 : index < 5 ? (index == 2 ? 2000 : 5000) : 20000000
  )
).concatAll().multicast(new Rx.Subject())
//A emitted at 0s, B at 5s, C at 7s, D at 12s, E at 17s, F at ... never

const numberStream = Rx.Observable.zip(
  Rx.Observable.range(1, 20),
  Rx.Observable.interval(2000).startWith(-1).map(x => x +1),
  (number, index) => ({number, index})
).multicast(new Rx.Subject())
//1 emitted at 0s, 2 at 2s, 3 at 4s, ...

const slowedDownNumberStream = Rx.Observable.zip(
  numberStream,
  Rx.Observable.zip(
    letterStream,
    Rx.Observable.interval(10000).startWith(-1).map(x => x +1)
  ).timeoutWith(11000, Rx.Observable.interval(2000).startWith(-1)),
  (number, index) => ({number, index})
)

Rx.Observable.merge(letterStream, slowedDownNumberStream).subscribe(x => console.log(new Date(), " > ", x))
letterStream.connect()
numberStream.connect()

RxFiddle:http://rxfiddle.net/#type=editor&code=Y29uc3QgbGV0dGVyQXJyID0gWyJBIiwgIkIiLCAiQyIsICJEIiwgIkUiLCAiRiIsICJHIiwgIkgiLCAiSSJdCmNvbnN0IGxldHRlclN0cmVhbSA9IFJ4Lk9ic2VydmFibGUuemlwKAogIFJ4Lk9ic2VydmFibGUuZnJvbShsZXR0ZXJBcnIpLAogIFJ4Lk9ic2VydmFibGUucmFuZ2UoMCwgbGV0dGVyQXJyLmxlbmd0aCAtIDEpLCAKICAobGV0dGVyLCBpbmRleCkgPT4gUnguT2JzZXJ2YWJsZS5vZih7bGV0dGVyLCBpbmRleH0pLmRlbGF5KAogICAgaW5kZXggPT0gMCA/IDAgOiBpbmRleCA8IDUgPyAoaW5kZXggPT0gMiA/IDIwMDAgOiA1MDAwKSA6IDIwMDAwMDAwCiAgKQopLmNvbmNhdEFsbCgpLm11bHRpY2FzdChuZXcgUnguU3ViamVjdCgpKQovL0EgZW1pdHRlZCBhdCAwcywgQiBhdCA1cywgQyBhdCA3cywgRCBhdCAxMnMsIEUgYXQgMTdzLCBGIGF0IC4uLiBuZXZlcgoKY29uc3QgbnVtYmVyU3RyZWFtID0gUnguT2JzZXJ2YWJsZS56aXAoCiAgUnguT2JzZXJ2YWJsZS5yYW5nZSgxLCAyMCksCiAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgyMDAwKS5zdGFydFdpdGgoLTEpLm1hcCh4ID0+IHggKzEpLAogIChudW1iZXIsIGluZGV4KSA9PiAoe251bWJlciwgaW5kZXh9KQopLm11bHRpY2FzdChuZXcgUnguU3ViamVjdCgpKQovLzEgZW1pdHRlZCBhdCAwcywgMiBhdCAycywgMyBhdCA0cywgLi4uCgpjb25zdCBzbG93ZWREb3duTnVtYmVyU3RyZWFtID0gUnguT2JzZXJ2YWJsZS56aXAoCiAgbnVtYmVyU3RyZWFtLAogIFJ4Lk9ic2VydmFibGUuemlwKAogICAgbGV0dGVyU3RyZWFtLAogICAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgxMDAwMCkuc3RhcnRXaXRoKC0xKS5tYXAoeCA9PiB4ICsxKQogICkudGltZW91dFdpdGgoMTEwMDAsIFJ4Lk9ic2VydmFibGUuaW50ZXJ2YWwoMjAwMCkuc3RhcnRXaXRoKC0xKSksCiAgKG51bWJlciwgaW5kZXgpID0+ICh7bnVtYmVyLCBpbmRleH0pCikKClJ4Lk9ic2VydmFibGUubWVyZ2UobGV0dGVyU3RyZWFtLCBzbG93ZWREb3duTnVtYmVyU3RyZWFtKS5zdWJzY3JpYmUoeCA9PiBjb25zb2xlLmxvZyhuZXcgRGF0ZSgpLCAiID4gIiwgeCkpCmxldHRlclN0cmVhbS5jb25uZWN0KCkKbnVtYmVyU3RyZWFtLmNvbm5lY3QoKQ==

你看,我在slowedDownNumberStream中使用了letterStream。

我的情况现在,我有一个单独的流作为输入(字母和数字混合),所以我需要使用groupBy ...对它们进行分区,因为我需要在mergeMap内部,所以我把bufferCount放在groupBy和mergeMap。