[RxJS] Reactive Programming - New requests from refresh clicks -- merge()
2016-03-08 19:31
519 查看
Now we want each time we click refresh button, we will get new group of users. So we need to get the refresh button click event stream:
Then each time refreshClickStream happens, we will get users request url:
And we use this url to get json object:
But the problem here is when the page loaded, we haven't click refresh button yet, therefore there is no data fetched fromt the server.
So we need to have a stream when the page loaded:
Then we can merge startUpRequestStream with requestOnRefreshStream:
var refreshButton = document.querySelector('.refresh'); var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
Then each time refreshClickStream happens, we will get users request url:
var requestOnRefreshStream = refreshClickStream .map(ev => { var randomOffset = Math.floor(Math.random()*500); return 'https://api.github.com/users?since=' + randomOffset; });
And we use this url to get json object:
var responseStream = requestOnRefreshStream .flatMap(requestUrl => Rx.Observable.fromPromise(jQuery.getJSON(requestUrl)) );
But the problem here is when the page loaded, we haven't click refresh button yet, therefore there is no data fetched fromt the server.
So we need to have a stream when the page loaded:
var startupRequestStream = Rx.Observable.just('https://api.github.com/users');
Then we can merge startUpRequestStream with requestOnRefreshStream:
var responseStream = requestOnRefreshStream .merge(startupRequestStream) .flatMap(requestUrl => Rx.Observable.fromPromise(jQuery.getJSON(requestUrl)) );
//-------a-----b-----c---------> //s-----------------------------> //merge //s------a-----b-----c--------->
相关文章推荐
- MVVM-ReactiveCocoa
- 【无源汇有上下界可行流】ACdream1211-Reactor Cooling
- react与native异步交互的几种方式
- ACE反应器(Reactor)模式(4)
- ACE反应器(Reactor)模式(3)
- ACE反应器(Reactor)模式(2)
- ACE反应器(Reactor)模式(1)
- React Native(第二节点击事件)
- React Native开发之按钮的使用
- ReactiveCocoa入门教程——第二部分
- ReactiveCocoa入门教程——第一部分
- React-约束组件及无约束组件详解
- 源码推荐(03.08):ReactiveCocoa登录交互效果的实现,可编辑可拖动排序
- [RxJS] Reactive Programming - Rendering on the DOM with RxJS
- [RxJS] Reactive Programming - Why choose RxJS?
- React模板
- [RxJS] Reactive Programming - What is RxJS?
- 深入浅出 React Native:使用 JavaScript 构建原生应用
- react native
- React event