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. MVC学习-用EF做增删改查

    在做增删改查先,先介绍几个知识点: 1.代理类 在将对象方法EF数据上下文时,EF会为该对象封装 一个代理类对象, 同时为该对象的每一个属性添加一个标志:unchanged, 当对该对象某个属性进行操 ...

  2. 动态属性ExpandoObject

    1.动态创建对象及其属性ExpandoObject 查看ExpandoObject的定义:

  3. Git命令add和commit的区别

    要想弄明白git add和git commit的区别,首先我们需要知道三个概念:工作区(Working Directory).版本库(Repository).暂存区(Stage or index). ...

  4. LR接口测试---socket

    前提条件: 编译:javac TcpServer.java 启动:java TcpServer ============================================ 代码示例: # ...

  5. 【转载】testlink 1.8.5 安装错误的解决方法

    TestLink所需环境为PHP+MYSQL (支持MS SQL等),系统推荐使用PHP5.2,安装成功以后,如果运行时出错,主要两种错: [1].HP Warning: strtotime(): I ...

  6. Visual Studio TFS

    Overview:Active Directory环境下搭建TFS(一个domain内,with Domain Controller): 1)最简单的环境(这俩拓扑是从TFSAdmin文档中截取的,从 ...

  7. HDU_1506_Largest Rectangle in a Histogram_dp

    Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  8. HDU_1022_Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  9. Java基础(六)--枚举Enum

    枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...

  10. 洛谷——P2094 运输

    P2094 运输 题目描述 现在已知N件商品,和搬运它们其中每一件的费用.现在搬家公司老板Mr.sb决定让我们每次任意选取2件商品.然后这2件商品只算一件商品的费用.但是这个商品的搬运费用是将选出的2 ...