[RxJS] mergeAll - mergeMap

const input$ = fromEvent(textInput, 'keyup');

input$.pipe(
  map(event => {
    const term = event.target.value;
    return ajax.getJSON(`https://api.github.com/users/${term}`) // return a nested observable
  }),
  debounceTime(200),  
).subscribe((obs) => {
  obs.subscribe(console.log) // you have to subscribe again
})

 

One way can solve the problem is mergeAll: it will help to subscribe nested observable

const input$ = fromEvent(textInput, 'keyup');

input$.pipe(
  map(event => {
    const term = event.target.value;
    return ajax.getJSON(`https://api.github.com/users/${term}`) // return a nested observable
  }),
  debounceTime(200),
  mergeAll(),
).subscribe(console.log)

 

It is so common map + mergeAll, so can use mergeMap():

const input$ = fromEvent(textInput, 'keyup');

input$.pipe(
  debounceTime(200),  
  mergeMap(event => {
    const term = event.target.value;
    return ajax.getJSON(`https://api.github.com/users/${term}`) // return a nested observable
  }),
).subscribe(console.log)

 

posted @   Zhentiw  阅读(37)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2020-10-18 [Kotlin Unit test] Spek & Mock
2019-10-18 [Flutter & Dart] Await a Future void function
2017-10-18 [AngularFire] Resolve snapshotChanges doesn't emit value when data is empty
2016-10-18 [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
2016-10-18 [CSS] Target empty elements using the :empty pseudo-class
2016-10-18 [Angular2 Animation] Basic animation
2016-10-18 [Angular2 Router] Auxiliary Routes bit by bit
点击右上角即可分享
微信分享提示