RxJS Pipe method utilization

Question

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

I am learing angular and from angular official site I have seen this code. What does the .pipe() function is used for?

learn from here https://rxjs-dev.firebaseapp.com/guide/operators — Gourav Garg, Apr 05 '20 at 08:48
An observable return data in async mode, you can change this response, e.g. you expect received some like `data:{prop1:'prop1',array:[0,1,2]}` and you only want the value of "array", so you use "map" to transform the response: `pipe(map(res=>res.array))` From Rxjs 6, you use pipe(operator1(res),operator2(res),....), where operator# are differents operators (swichMap,map,takeWhile,concat,bitwise...). The result is a new Observable that return when we subscribe to it the response we want — Eliseo, Apr 05 '20 at 09:18
Does this answer your question? [What is pipe() function in Angular](https://stackoverflow.com/questions/48030197/what-is-pipe-function-in-angular) — frido, Apr 05 '20 at 17:29
Also see: [What is pipe for in rxJS](https://stackoverflow.com/questions/48668701/what-is-pipe-for-in-rxjs) — frido, Apr 05 '20 at 17:30

score 0 · Answer 1 · answered Apr 05 '20 at 11:00

RxJS implements the reactive programming paradigm on the core concept of OBSERVABLES.

If you already know javascript's Promises, the observables have some slight differences:

a Promise is eager, whereas an Observable is lazy;

a Promise is always asynchronous, while an Observable can be either synchronous or asynchronous;

a Promise can provide a single value, whereas an Observable is a stream of values (from 0 to multiple values);

Having said this, RxJS libraries provides a lot of function named Creation Operators which are functions that can be used to create new OBSERVABLES starting from very common JS behaviour for example AJAX calls (asynchronous javascript and xml)

import { ajax } from 'rxjs/ajax';

// Create an Observable that will create an AJAX request
const apiData = ajax('/api/data');

On this Kind of operators, we can apply Pipeable Operators. The difference among them is that they have to be applied on an existing operator, creating a new one.

Imagining the concatenation of a series of this pipeable operators, the code will be written as:

pipeableOperator3(pipeableOperator2(pipeableOperator(creatorOperator())))

For that reason, Observables have a method called .pipe() that accomplishes the same thing while being much easier to read:

creatorOperator().pipe(
  pipeableOperator1(),
  pipeableOperator2(),
  pipeableOperator3());

score 0 · Answer 2 · answered Jul 21 '22 at 18:39

pipe method in rxjs can chain multiple operators before we subscribe to it which allows us to perform any number of operations on the data we are receiving. The output of each operator within the pipe method is the input for the next operator in the chain. Finally, when we subscribe to it, we get the final observable.

Example:

const obs = of(1,2,3,4).
            pipe(filter(val => val > 2),
            map(val => val*2)).
            subscribe(res => console.log(res);

RxJS Pipe method utilization

2 Answers2