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()
);