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

Posted 2020-12-05 Answer1215

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