Use Promises with RxJS in Vue.js
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.
Instructor: [00:00] Currently every single time I click on a tab, it makes another network request, even if I've already visited that tab. So to implement some caching, we first need to understand how promises inter-operate with observables because my create loader is using a promise to fetch that data.
[00:20] When you create a new promise, you pass in a function that can resolve or reject. Inside of this function, I'm going to write, "console log invoked." Simply by hitting save here, you'll see invoked shows up, even though I haven't resolved or rejected this promise.
[00:40] If I do resolve it -- so I'll pass in "hello" as the value and then call this my promise, and I'll create a "then" on my promise, so "promise then value console log value" -- you'll see "invoked" and then "hello" is passed to "then," which will result in "invoked" and "hello."
[01:02] If I do this like four times, hit save, you'll see "invoked" and then four "hellos." Only one "invoked" because this function is only invoked one time. If I change this to a new date and hit save, even though it's inside of a function that would generally kind of act as a factory and create a new date, you'll see that each of these times -- so 50 seconds, 50 seconds, 50 seconds -- are the same, even if I wrap in a set time out.
[01:31] So this will be my callback, and then we'll say "respond after three seconds," and move these two up inside of the callback, hit save. You'll see the first two are 22 seconds and the next two are also 22 seconds, even though this occurred three seconds later.
[01:49] It's getting that exact same value each time. If I re-factor these promises and change them into observables by using "observable from," so to select this, and grab all of these and rename it to "observable.frommypromise.subscribe," now all these promises are working as observables.
[02:13] I'll hit save and we'll have that exact same behavior of "invoked" 02 seconds, and all of these shared that exact same value, and this was only invoked once. No matter who subscribes to this observable or accesses it later, it's always going to get that same promise value that you pass into resolve.