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

InstructorJohn Lindquist

Vue.js^2.5.13
RxJS5.5.12 - 6.4.0
JavaScript

Share this video with your friends

Send Tweet

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.

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