[Vue-rx] Cache Remote Data requests with RxJS and Vue.js

A Promise invokes a function which stores a value that would be passed to a callback. If you have wrap a Promise with an Observable, you'll always get the that same value. This enables is the behavior as a caching mechanism when the Promises do requests for remote data.

Const P =NewPromise (Resolve, reject) ={Console.log ("Promise started");//This line would be a print out only once if the promise was invokedResolveNewDate ()); });//the output date should be the same, since promise is only invoke onceP.then (date) ={console.log (date)//Thu Jul 2018 12:55:41 gmt+0300 (EEST)}) SetTimeout (()={p.then (date)={console.log (date)//Thu Jul 2018 12:55:41 gmt+0300 (EEST)    })  }, 2000);

Caching data in RxJS can is as simple as creating a Caching function which can store the values of an object. This lessons walks through creating a caching function and explains how the function closes over an object then pairs a ur L Observable that returns the resolution of a Promise

Let cache = {}; //Cache functionConst 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 (()= = ({name: ' Failed.:('})), share ());

[Vue-rx] Cache Remote Data requests with RxJS and Vue.js