⚠️ This lesson is retired and might contain outdated information.

Use Promises with RxJS in Vue.js

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated a month ago

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.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today