[Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
A Promise invokes a function which stores a value that will be passed to a callback. So when you wrap a Promise with an Observable, you'll always get that same value. This enables you to use the behavior as a caching mechanism when the Promises make requests for remote data.
const p = new Promise((resolve, reject )=> {
console.log("Promise started"); // This line will be print out only once, when the promise was invoked
resolve(new Date());
}); // The output date should be the same, since promise was only invoke once
p.then(( date)=> {
console.log(date) // Thu Jul 19 2018 12:55:41 GMT+0300 (EEST)
}) setTimeout(( )=> {
p.then(( date)=> {
console.log(date) //Thu Jul 19 2018 12:55:41 GMT+0300 (EEST)
})
}, 2000);
Caching data in RxJS can be as simple as creating a caching function which can store the values in an object. This lessons walks through creating a caching function and explains how the function closes over an object then pairs a url with an Observable that returns the resolution of a Promise
let cache = {};
// Cache function
const cachePerson = cache => url =>
cache[url] ?
cache[url]:
cache[url] = createLoader(url); const activeTab$ = this.$watchAsObservable('activeTab', {
immediate: true
}).pipe(pluck('newValue')); // this.$http.get() return a promise, then convert to Observable using from()
const createLoader = url => from(this.$http.get(url)).pipe(pluck('data')); const people$ = createLoader('https://starwars.egghead.training/people').pipe(
map(people => people.slice(0,7 ))
); const person$ = combineLatest(
activeTab$,
people$,
(people$, (tabId, people) => people[tabId].id))
.pipe(
map(id => `https://starwars.egghead.training/people/${id}`),
switchMap(cachePerson(cache)),
catchError(() => of({ name: 'Failed.. :(' })),
share()
);
[Vue-rx] Cache Remote Data Requests with RxJS and Vue.js的更多相关文章
- vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...
- [GraphQL] Query Local and Remote Data in Apollo Link State
In this lesson, you will learn how to query local and remote data in Apollo Link State in the same c ...
- Angular Multiple HTTP Requests with RxJS
原文:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs ----------------------------- ...
- Knockout Grid - Loading Remote Data
http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/ We were hearing quite a few peopl ...
- fastboot 刷system.img 提示 sending 'system' (*KB)... FAILED (remote: data too large)
华为G6-C00卡刷提示OEMSBL错误,只能线刷 ,但是官方找不到线刷img镜像,无奈 网上下了个可以线刷的工具套件 流氓ROM . 使用HuaweiUpdateExtractor(工具百度)把官方 ...
- 【Vue】定义组件 data 必须是一个函数返回的对象
Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value ...
- Vue实例的的data对象
介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
随机推荐
- idea安装插件plugin(主要针对网络连接不上的情况)
https://blog.csdn.net/duoduo1636546/article/details/80104711
- apache hadoop 伪分布式安装
1. 准备工作 1.1. 软件准备 1.安装VMWare 2.在VMWare上安装CentOS6.5 3.安装XShell5,用来远程登录系统 4.通过rpm -qa | grep ssh 检查cen ...
- ci框架中model简单的mysql操作
<?php class SingerModel extends CI_Model { function SingerModel() { //会将数据库对象赋值给CI_Controller的db属 ...
- C++ 模板template和template
原文链接:https://blog.csdn.net/skyleung/article/details/42195509 template<class T>和template<typ ...
- Vue指令7:v-model
可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值. 因为它会选择 Vue 实例数据来作为 ...
- CAD使用GetXData读数据(网页版)
主要用到函数说明: MxDrawEntity::GetXData 返回实体的扩展数据. js代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- freemarker使用map替换ftl中相关值
ftl文件demo01.ftl <html> <head> <title>Welcome!</title> </head> <body ...
- docker 转载
写的非常好的一篇文章,不知道为什么被删除了. 利用Google快照,做个存档. 快照地址:地址 作者地址:青牛 什么是docker Docker 是一个开源项目,诞生于 2013 年初,最初是 do ...
- 洛谷——P2094 运输
P2094 运输 题目描述 现在已知N件商品,和搬运它们其中每一件的费用.现在搬家公司老板Mr.sb决定让我们每次任意选取2件商品.然后这2件商品只算一件商品的费用.但是这个商品的搬运费用是将选出的2 ...
- Centos7配置ThinkPHP5.0完整过程(二)
接上篇<Centos7配置ThinkPHP5.0完整过程(一)>,开始配置PHP环境 安装php sudo yum install php -y 安装扩展程序 sudo yum insta ...