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
原文地址：https://www.cnblogs.com/Answer1215/p/9337474.html