[RxJS] Reactive Programming - Sharing network requests with shareReplay()

Currently we show three users in the list, it actually do three time network request, we can verfiy this by console out each network request:

var responseStream = startupRequestStream.merge(requestOnRefreshStream)
  .flatMap(requestUrl => {
    console.log(‘do network request‘);
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

We actually can use the same network request by shareReplay(1):

var responseStream = startupRequestStream.merge(requestOnRefreshStream)
  .flatMap(requestUrl => {
    console.log(‘do network request‘);
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  })
  .shareReplay(1);

Why replay one? Well, that‘s because if there happens to be a really late subscriber...let‘s say someone does a setTimeout and doesn‘t subscribe to the responseStream after a long while. Let‘s say, three seconds or even 10 seconds. Then, this subscribe will get a replayed response JSON. It will not do a new network request, but it will simply replay that same JSON that happened before.

时间: 2024-10-14 00:51:28

[RxJS] Reactive Programming - Sharing network requests with shareReplay()的相关文章

[RxJS] Reactive Programming - What is RxJS?

First thing need to understand is, Reactive programming is dealing with the event stream. Event streams happens overtime, which not stay in the memory. For example, the array we have: var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13']; W

[RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()

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

[RxJS] Reactive Programming - New requests from refresh clicks -- merge()

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: var refreshButton = document.querySelector('.refresh'); var refreshClickStream = Rx.Observable.fromEvent(refreshBu

[RxJS] Reactive Programming - Why choose RxJS?

RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a = 4; var b = a * 10; console.log(b); // 40 a = 5; console.log(b); // 40 So you change a, it won't affect b's value because b is already defined.... So

[Reactive Programming] RxJS dynamic behavior

This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value evolving over time. It allows you to specify the dyna

"Principles of Reactive Programming" 之<Actors are Distributed> (1)

week7中的前两节课的标题是”Actors are Distributed",讲了很多Akka Cluster的内容,同时也很难理解. Roland Kuhn并没有讲太多Akka Cluster自身如何工作的细节,而是更关注于如何利用Akka Cluster来把Actor分布到不同的节点上,或许这么安排是因为Akka Cluster能讲的东西太多,而Coursera的课时不够.但是,从听众的角度来说,这节课只是初步明白了下Akka Cluster能干啥,但是想要自己用起来,特别是想了解其工作的

ReactiveCocoa与Functional Reactive Programming

什么是Functional Reactive Programming http://limboy.me/ios/2013/06/19/frp-reactivecocoa.html Functional Reactive Programming(以下简称FRP)是一种响应变化的编程范式.先来看一小段代码 a = 2 b = 2 c = a + b // c is 4 b = 3 // now what is the value of c? 如果使用FRP,c的值将会随着b的值改变而改变,所以叫做「

Net中的反应式编程(Reactive Programming)

目录 系列主题:基于消息的软件架构模型演变 系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LINQ风格编写基于观察者模式的异步编程模型.简单点说Rx = Observables + LINQ + Schedulers. 2.为什么会产生这种风格的编程模型?我在本系列文章开始的时候说过一个使用事件的例子: 1 2 3 4 5 6 7 8 9 var 

Unity基于响应式编程(Reactive programming)入门

系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoTween&Unity Native2D实现 时光煮雨 Unity3D实现2D人物动画① UGUI&Native2D序列帧动画 时光煮雨 Unity3D实现2D人物动画② Unity2D 动画系统&资源效率 背景 前有慕容小匹夫的一篇<解构C#游戏框架uFrame兼谈游戏架构设计&