[Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
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的更多相关文章
- [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 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
- vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档
今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人 入门总 ...
- 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 ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- 【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略
大体思路 (三) 1. 子类父类 2.Vue.extend() //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app' ...
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对 ...
- Vue源码分析之实现一个简易版的Vue
目标 参考 https://cn.vuejs.org/v2/guide/reactivity.html 使用 Typescript 编写简易版的 vue 实现数据的响应式和基本的视图渲染,以及双向绑定 ...
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
随机推荐
- [转]windows 7 下快速搭建php环境(windows7+IIS7+php+mysql)
转贴:http://apps.hi.baidu.com/share/detail/10406992 (1).采用理由: 优点:最大化的桌面图形化操作系统,可维护性优秀.基于IIS v6.0/v7.0( ...
- JSP&&EL&&JSTL
JSP = JAVA + HTML + JSP自身的东西 JSP的脚本 <%! %> :翻译成Servlet中的成员内容. 定义变量,方法,类. -- ...
- ch1 About thinking skills
When confronted with a problem , we think about it. The issue, of course, is that our efforts may be ...
- 用rownum先排序后分页
今天突然想到rownum可以解决分页问题,于是做了各种实验,找个几个文章,最后有了一定成果. 现有表tablename,含有字段showorder,要求提取showorder的第11行到20行数据. ...
- Java学习3_一些基础3_16.5.7
字符串的一些常用方法: int length() String replace(CharSequence oldString,CharSequence newString) 用新字符串代替原字符串,返 ...
- iOS,Core Animation--负责视图的复合功能
简介 UIKit API UIKit是一组Objective-C API,为线条图形.Quartz图像和颜色操作提供Objective-C 封装,并提供2D绘制.图像处理及用户接口级别的动画. ...
- Spring框架系列(二)--装配和注入Bean
企业日常开发中,几乎都是Spring系的框架,无论是SSM.还是现在大火的SpringBoot+JPA/MyBatis,使用最大的目的就是简化开发 基本模块: 核心容器:Beans.Core.Cont ...
- java protostuff 序列化反序列化工具
protostuff是由谷歌开发的一个非常优秀的序列化反序列化工具 maven导入包: <dependency> <groupId>io.protostuff</grou ...
- HDU - 2018 - 母牛的故事(dp)
题意: 如题 思路: 递推的思想,牛只能在第4年才能开始生小牛,对于 第n年有多少牛 = n-1年的牛数量 + 新出生的牛的数量 新出生的牛的数量 = 已经出生满4年的牛的数量 = n-3年时候牛的数 ...
- UVA - 11212 Editing a Book (IDA*搜索)
题目: 给出n(1<n<10)个数字组成的序列,每次操作可以选取一段连续的区间将这个区间之中的数字放到其他任意位置.问最少经过多少次操作可将序列变为1,2,3……n. 思路: 利用IDA* ...