Splitting a stream into multiple streams causes new subscriptions. You can think of new subscriptions as "invoking a function". So if your original stream makes a request for data, splitting the original stream will make 2 requests for data. The way to get around this is by using share so that each time the stream is split, all the split stream stay synced together.

For the RxJS Code below, it issues network reuqest twice:

    const createLoader = url => from(this.$http.get(url)).pipe(pluck('data'));

    const luke$ = this.click$.pipe(
mapTo('https://starwars.egghead.training/people/1'),
switchMap(createLoader),
catchError(() => createLoader('https://starwars.egghead.training/people/2'))
); const name$ = luke$.pipe(pluck('name')); const image$ = luke$.pipe(
pluck('image'),
map(src => `https://starwars.egghead.training/${src}`)
);

Because both 'name$' and 'image$' will trigger 'luke$', then 'createLoader'.

In order to solve the problem we can use 'share()' or 'shareReplay(1)':

    const luke$ = this.click$.pipe(
mapTo('https://starwars.egghead.trainin/people/1'),
switchMap(createLoader),
catchError(() => createLoader('https://starwars.egghead.training/people/2')),
share()
);

[Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js的更多相关文章

  1. [Angular2 Form] Use RxJS Streams with Angular 2 Forms

    Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of t ...

  2. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  3. vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档

    今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人  入门总 ...

  4. Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案

    Wed Jun 27 2018 09:25:43 GMT+0800 (中国标准时间) Page 注册错误,Please do not register multiple Pages in undefi ...

  5. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  6. 【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略

    大体思路 (三)  1. 子类父类  2.Vue.extend()      //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app' ...

  7. 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

    在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对 ...

  8. Vue源码分析之实现一个简易版的Vue

    目标 参考 https://cn.vuejs.org/v2/guide/reactivity.html 使用 Typescript 编写简易版的 vue 实现数据的响应式和基本的视图渲染,以及双向绑定 ...

  9. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

随机推荐

  1. 全志tina v3.0系统编译时的时间错误的解决(全志SDK的维护BUG)

    全志tina v3.0系统编译时的时间错误的解决(全志SDK的维护BUG) 2018/6/13 15:52 版本:V1.0 开发板:SC3817R SDK:tina v3.0 1.01原始编译全志r1 ...

  2. eclipse中添加maven

    收藏一下,一篇很好的例子 maven相关插件:链接:http://pan.baidu.com/s/1i3Ks95j 密码:7pgh eclipse:链接:http://pan.baidu.com/s/ ...

  3. php总结回顾

    做人不能一直埋着头往前跑,还要偶尔停下来看下来时的路.所以今天就来回顾下之前的吧 下面依次介绍 [一]TP加载流程 ①应用入口文件index.php→②tp公共入口文件ThinkPHP.php→③核心 ...

  4. HDU多校Round 7

    Solved:2 rank:293 J. Sequense 不知道自己写的什么东西 以后整数分块直接用 n / (n / i)表示一个块内相同n / i的最大i #include <bits/s ...

  5. idea之快速查看类所在jar包

  6. tf idf公式及sklearn中TfidfVectorizer

    在文本挖掘预处理之向量化与Hash Trick中我们讲到在文本挖掘的预处理中,向量化之后一般都伴随着TF-IDF的处理,那么什么是TF-IDF,为什么一般我们要加这一步预处理呢?这里就对TF-IDF的 ...

  7. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  8. java学习日志---File实例:实现复制整个文件夹、解决listFiles()为null问题

    需求:将H盘下的所有文件复制到H:/All 文件夹中 思路:使用递归遍历整个目标目录 传入目标路径 判断是否是文件夹 是:调用listFiles()方法,得到File数组,重点内容接着执行1 否:复制 ...

  9. P2041 分裂游戏

    P2041 分裂游戏 手推$n=3$是无解的,推断$n>=3$是无解的 证明略,这是道结论题. #include<iostream> #include<cstdio> # ...

  10. 洛谷——P1549 棋盘问题(2)

    P1549 棋盘问题(2) 搜索||打表 #include<cstdio> #include<cstring> #include<iostream> #includ ...