[Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
2023-09-14 08:59:17 时间
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] Pass Template Data Through domStreams in Vue.js and RxJS
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- Vue.js:轻量高效的前端组件化方案
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- Vue.js快速入门
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Vue] Get up and running with vue-router
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- Vue入门教程:node安装vue命令行工具及启动项目
- vue项目JS播放音频音效和背景音乐
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
- 【vue】如何安装vue 脚手架以及创建脚手架项目_10
- Vue.js起步
- Vue:第一个vue-cli项目