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

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.

illustration for Build Async Vue.js Apps with RxJS

Course

Build Async Vue.js Apps with RxJS

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