illustration for Build Async Vue.js Apps with RxJS
Course

Build Async Vue.js Apps with RxJS

  6. 6
    Split a Request into Data Stream and an Image Stream with RxJS and Vue.js
    1m 16s
⚠️ This lesson is retired and might contain outdated information.

Split a Request into Data Stream and an Image Stream with RxJS and Vue.js

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 2 months ago

A single stream can branch off into many different streams based on how you need to handle each piece of information. This lesson shows how you take the data request and split it into a name$ stream and an image$ stream so that we can handle the image loading separately.

View code for this lesson

Instructor: [00:00] we'll make this a bit more interesting by loading an image. Instead of plucking the data and name, let's pluck the data. We'll call this "Person," and change this to Person. Then, we can create a name stream. I'll say constName is Luke pluck name, an image stream which can be Luke.pluck image.

[00:27] We'll return both of those. We'll return name at image, and then render both of them out inside of our template. We'll render out the name. For right now, we'll render out image right here to check that it's working. I'll click, and you'll see Luke. You'll see this image name. Let's go ahead and drop that inside of an image tag.

[00:49] We'll bind the source to image. The image actually is on the remote server. I'm going to have to map this image to the URL where it is, so starwars.egghead.training/, and then image. Hit Save there. Now when I click, it'll load in Luke and load in the image...

Paul Perry
Paul Perry
~ 6 years ago

Here are some updated imports and pipe usage I used to get this working, in case anyone has issues:

import { pluck, switchMap, map } from 'rxjs/operators';

//...
    const name$ = getName$.pipe(pluck('name'));
    const image$ = getName$.pipe(
      pluck('image'), 
      map(image => `https://starwars.egghead.training/${image}`)
    );

Note that the pipe function accepts a comma-separated list of function calls - more info here

Markdown supported.
Become a member to join the discussionEnroll Today