MCQ

The RxJS library

Reactive programming is an asynchronous programming paradigm that deals with data streams and propagation of change. RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easy to write asynchronous or callback-based code.

RxJS implements the Observable type, which is required until the type becomes part of the language and until browsers support it. The library also provides utility functions for building observatories and working with them. These utility functions can be used to:

Converting existing code for async operations into observables

Iterating through the values in a stream
Mapping values to different types
Filtering streams
Composing multiple streams
Observable creation functions

RxJS provides several functions that can be used to create new observables. These functions can simplify creating observables from things like events, timers, and promises. For example:

Create an observable from a promise

content_copyimport { from, Observable } from 'rxjs';

// Create an Observable out of a promise
const data = from(fetch('/api/endpoint'));
// Subscribe to begin listening for async result
data.subscribe({
  next(response) { console.log(response); },
  error(err) { console.error('Error: ' + err); },
  complete() { console.log('Completed'); }
});
Create an observable from a counter
content_copyimport { interval } from 'rxjs';

// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
const subscription = secondsCounter.subscribe(n =>
  console.log(`It's been ${n + 1} seconds since subscribing!`));
Create an observable from an event
content_copyimport { fromEvent } from 'rxjs';

const el = document.getElementById('my-element')!;

// Create an Observable that will publish mouse movements
const mouseMoves = fromEvent<MouseEvent>(el, 'mousemove');

// Subscribe to start listening for mouse-move events
const subscription = mouseMoves.subscribe(evt => {
  // Log coords of mouse movements
  console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);

  // When the mouse is over the upper-left of the screen,
  // unsubscribe to stop listening for mouse movements
  if (evt.clientX < 40 && evt.clientY < 40) {
    subscription.unsubscribe();
  }
});

Create an observable that creates an AJAX request

content_copyimport { Observable } from 'rxjs';
  import { ajax } from 'rxjs/ajax';

// Create an Observable that will create an AJAX request
  const apiData = ajax('/api/data');
  // Subscribe to create the request
  apiData.subscribe(res => console.log(res.status, res.response));

Operators

Operators are functions that are built on an observable foundation to enable sophisticated manipulation of collections. For example, RxJS defines operators such as map(), filter(), concat(), and flatmap().

Operators take configuration options, and they return a function that takes a source observable. When executing this returned function, the operator looks at the source observable values, transforms them, and returns a new observable of those transformed values. Here is a simple example:

Map operator

content_copyimport { of } from 'rxjs';
import { map } from 'rxjs/operators';

const nums = of(1, 2, 3);

const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);

squaredNums.subscribe(x => console.log(x));

// Logs
// 1
// 4
// 9

You can use pipes to join operators together. Pipes let you combine multiple functions into a single function. The pipe() function considers the functions you want to concatenate and returns a new function that, when executed, runs the created functions in sequence.

A set of operators applied to an Observable is a recipe - that is, a set of instructions for producing the values you are interested in. By itself, the recipe does nothing. You need to call subscribe() to generate the result via the recipe.

Below is the example:

Standalone pipe function

content_copyimport { of, pipe } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const nums = of(1, 2, 3, 4, 5);

// Create a function that accepts an Observable.
const squareOddVals = pipe(
  filter((n: number) => n % 2 !== 0),
  map(n => n * n)
);

// Create an Observable that will run the filter and map functions
const squareOdd = squareOddVals(nums);

// Subscribe to run the combined functions
squareOdd.subscribe(x => console.log(x));

The pipe() function is also a method on the RxJS Observable, so you use this shorter form to define the same operation:

Observable.pipe function

content_copyimport { of } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0),
    map(n => n * n)
  );

// Subscribe to get values

Common operators

RxJS provides many operators, but only a handful are used frequently. For a list of operators and usage samples, visit the RxJS API Documentation.

Note that, for Angular applications, we prefer combining operators with pipes rather than chaining. Chaining is used in many RxJS examples.

AREA	OPERATORS
Creation	from, fromEvent, of
Combination	combineLatest, concat, merge, startWith, withLatestFrom, zip
Filtering	debounceTime, distinctUntilChanged, filter, take, takeUntil
Transformation	buffer time, concatMap, map, mergeMap, scan, switch the map
Utility	tap
Multicasting	share

Error handling

In addition to the error() handler you provided on the subscription, RxJS provides the CatchError operator that lets you handle known errors in the observable recipe.

For example, let's say you have an observable that makes an API request and maps to a response from the server. If the server returns an error or the value does not exist, an error is generated. If you catch this error and provide a default value, your stream continues to process the values instead of the error.

Here's an example of using the catchError operator to do this:

catchError operator
content_copyimport { Observable, of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';

// Return "response" from the API. If an error happens,
// return an empty array.
const apiData = ajax('/api/data').pipe(
  map((res: any) => {
    if (!res.response) {
      throw new Error('Value expected!');
    }
    return res.response;
  }),
  catchError(() => of([]))
);

apiData.subscribe({
  next(x: T) { console.log('data: ', x); },
  error() { console.log('errors already caught... will not run'); }
});

Retry failed observable

The catch error operator provides a simple route to recovery, and the retry operator lets you retry a failed request.

Use the retry operator before the catch error operator. It re-subscribes to the observable source, which can then replay the full sequence of actions that resulted in the error. If it includes an HTTP request, it will retry that HTTP request.

The following converts the previous example to retry the request before catching the error:

retry operator

content_copyimport { Observable, of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, retry, catchError } from 'rxjs/operators';

const apiData = ajax('/api/data').pipe(
  map((res: any) => {
    if (!res.response) {
      console.log('Error occurred.');
      throw new Error('Value expected!');
    }
    return res.response;
  }),
  retry(3), // Retry up to 3 times before failing
  catchError(() => of([]))
);

apiData.subscribe({
  next(x: T) { console.log('data: ', x); },
  error() { console.log('errors already caught... will not run'); }
});

Do not retry authentication requests as these should only be initiated by a user action. We don't want to lockout user accounts with repeated login requests that the user hasn't initiated.

Naming Conventions for Observatories

Because Angular applications are mostly written in TypeScript, you will usually know when a variable is observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing "$".

. This can be useful when scanning through codes and looking for observable values. Also, if you want a property to store the latest value from an observable, it can be convenient to use the same name with or without the "$".

For example:

Naming observables

content_copyimport { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-stopwatch',
  templateUrl: './stopwatch.component.html'
})
export class StopwatchComponent {

  stopwatchValue = 0;
  stopwatchValue$!: Observable<number>;

  start() {
    this.stopwatchValue$.subscribe(num =>
      this.stopwatchValue = num
    );
  }
}

Next TopicAngular 9 Features

← prev next →