Home » The RxJS library

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

Create an observable that creates an AJAX request

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

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

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

// 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:

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

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


Next TopicAngular 9 Features

You may also like