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. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

  2. c++利用jsoncpp libcurl 构造http 包(原)

    我们手游要接入uc九游进行测试,要用http向uc那边的sdk 服务器post  json数据. 虽然他们提供了php,java还有c#的服务端demo,但是我们服务器是C++写的,我实在不想中间再转 ...

  3. windows2008 rs+sql 2008 下配置站点权限

    几点注意 Windows 2008 iis7.5  1 建立应用程序池 2 文件目录的权限加上 IIS AppPool\应用程序池名称 (找不到直接录入) 3 文件目录要给 IUser权限,不然出错. ...

  4. ASP.NET跨页面传值技巧[总结]

    个人网站:http://www.51pansou.com .net视频下载:.net视频教程 .net源码下载:.net源码 关于页面传值的方法,我就我个人观点做了些总结,希望对大家有所帮助. 1.  ...

  5. C# 字符串每隔两个 提取

    private void button3_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); str ...

  6. oracle关闭

    Alert log 要每天查看 abort 关闭冷备会无法使用

  7. ArrayList经典Demo

    import java.util.ArrayList; import java.util.Iterator; public class ArrayListDemo { public static vo ...

  8. Android 项目Log日志输出优化

    概述 Android开发过程中经常需要向控制台输出日志信息,有些人还在用Log.i(tag,msg)的形式或者system.out.println(msg)方式吗?本篇文章对日志信息输出进行优化,以达 ...

  9. 参考KOA,5步手写一款粗糙的web框架

    我经常在网上看到类似于KOA VS express的文章,大家都在讨论哪一个好,哪一个更好.作为小白,我真心看不出他两who更胜一筹.我只知道,我只会跟着官方文档的start做一个DEMO,然后我就会 ...

  10. 60s倒计时

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...