标签：person combine err load invoke ini catch vue.js test
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
标签：person combine err load invoke ini catch vue.js test
原文地址：https://www.cnblogs.com/Answer1215/p/9337474.html
