Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use Promises with RxJS in Vue.js

    John LindquistJohn Lindquist

    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.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss