[RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()
-- with Data Using Network Rxjs Programming reactive
2023-09-14 08:59:20 时间
So now we want to replace one user when we click the 'x' button.
To do that, we want:
1. Get the cached network data for generating the userList.
2. Then get a random user from the cached data.
3. Showing the user in the list.
We have the function to create suggestion user:
function createSuggestionStream(responseStream, closeClickStream) { return responseStream.map(getRandomUser) .startWith(null) .merge(refreshClickStream.map(ev => null)) }
It contains the 'responseStream' which contains the cached data we need.
So, the code would somehow like this:
var close1Clicks = Rx.Observable.fromEvent(closeButton1, 'click'); close1Clicks.withLatestFrom(responseStream, (clickEv, cachedData) => { return getRandomUser(cachedData); });
When the closeClickStream happens, it will fetch the cached data and send userList to getRandomUser() function to pick user.
Now, we can merge this stream with responseStream:
function createSuggestionStream(responseStream, closeClickStream) { return responseStream.map(getRandomUser) .startWith(null) .merge(refreshClickStream.map(ev => null)) .merge( closeClickStream.withLatestFrom(responseStream, (clickEv, cachedData) => getRandomUser(cachedData)) ); }
-----------
var refreshButton = document.querySelector('.refresh'); var closeButton1 = document.querySelector('.close1'); var closeButton2 = document.querySelector('.close2'); var closeButton3 = document.querySelector('.close3'); var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click'); var close1Clicks = Rx.Observable.fromEvent(closeButton1, 'click'); var close2Clicks = Rx.Observable.fromEvent(closeButton2, 'click'); var close3Clicks = Rx.Observable.fromEvent(closeButton3, 'click'); var startupRequestStream = Rx.Observable.just('https://api.github.com/users'); var requestOnRefreshStream = refreshClickStream .map(ev => { var randomOffset = Math.floor(Math.random()*500); return 'https://api.github.com/users?since=' + randomOffset; }); var requestStream = startupRequestStream.merge(requestOnRefreshStream); var responseStream = requestStream .flatMap(requestUrl => Rx.Observable.fromPromise(jQuery.getJSON(requestUrl)) ) .shareReplay(1); // refreshClickStream: -------f-------------> // requestStream: r------r-------------> // responseStream: ---R-------R---------> // closeClickStream: ---------------x-----> // suggestion1Stream: N--u---N---u---u-----> function getRandomUser(listUsers) { return listUsers[Math.floor(Math.random()*listUsers.length)]; } function createSuggestionStream(responseStream, closeClickStream) { return responseStream.map(getRandomUser) .startWith(null) .merge(refreshClickStream.map(ev => null)) .merge( closeClickStream.withLatestFrom(responseStream, (clickEv, cachedData) => getRandomUser(cachedData)) ); } var suggestion1Stream = createSuggestionStream(responseStream, close1Clicks); var suggestion2Stream = createSuggestionStream(responseStream, close2Clicks); var suggestion3Stream = createSuggestionStream(responseStream, close3Clicks); // Rendering --------------------------------------------------- function renderSuggestion(suggestedUser, selector) { var suggestionEl = document.querySelector(selector); if (suggestedUser === null) { suggestionEl.style.visibility = 'hidden'; } else { suggestionEl.style.visibility = 'visible'; var usernameEl = suggestionEl.querySelector('.username'); usernameEl.href = suggestedUser.html_url; usernameEl.textContent = suggestedUser.login; var imgEl = suggestionEl.querySelector('img'); imgEl.src = ""; imgEl.src = suggestedUser.avatar_url; } } suggestion1Stream.subscribe(user => { renderSuggestion(user, '.suggestion1'); }); suggestion2Stream.subscribe(user => { renderSuggestion(user, '.suggestion2'); }); suggestion3Stream.subscribe(user => { renderSuggestion(user, '.suggestion3'); });
相关文章
- Ubuntu的学习之路【一】--文件权限的解析
- ECMAScript 6 -- 数组的解构赋值
- 《Android源码设计模式》--装饰模式
- [Javascript] Broadcaster + Operator + Listener pattern -- 22. mapError, wrap fetch with broadcaster with cancellation
- [Javascript] Broadcaster + Operator + Listener pattern -- 13. Repeat When Done with a Repeat Operator
- [Functional Programming] Working with two functors(Applicative Functors)-- Part2 --liftAN
- [Python] Indexing An Array With Another Array with numpy
- [AngularFire2] Auth with Firebase auth -- email
- 数据结构--树,二叉树
- 《Gradle权威指南》--Android Gradle高级自定义
- [Javascript] Broadcaster + Operator + Listener pattern -- 22. mapError, wrap fetch with broadcaster with cancellation
- [Intro to Deep Learning with PyTorch -- L2 -- N20] Cross-Entropy
- [Intro to Deep Learning with PyTorch -- L2 -- N15] Softmax function
- [React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability
- [Functional Programming] Working with two functors(Applicative Functors)-- Part1 --.ap
- [Django] Get started with Django -- Install python and virtualenv
- [MEAN Stack] First API -- 1. with Node.js, Express and MongoDB
- 运维经验分享(二)-- Linux Shell之ChatterServer服务控制脚本二次优化
- Centos7安装部署openstack--Networking 网络服务(控制节点)
- 解决docker network create --subnet报错的问题:Error response from daemon: Pool overlaps with other one on th
- docker容器的重启策略:通过--restart来指定
- Java线程池--Executors.newScheduledThreadPool()使用示例
- Linux -- CentOS7修改防护墙端口
- p1.第一章 Python基础入门 -- Python开发环境安装 (一)