Pipeable Operators are the kind that can be piped to Observables using the syntax observableInstance.pipe(operator()). These include, filter (…). , and mergeMap (…). . When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable. A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.

Operators are first-class citizens of the functional programming world, receiving an Observable as input and returning a new Observable.

Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.

With operator, we can program asynchronously in a declarative way.

map((x: number) = > x * x)(of(1.2.3)).subscribe((v) = > console.log(`value: ${v}`));
Copy the code

The map parentheses in the above example are very confusing. At first glance, they look like the parentheses of a function call. In fact, the parentheses contain the body of the arrow function.

The parentheses below are the parentheses for the actual function call.

let a = (x: number) = > x * x;
    let b = map(a);

    let c = of(1.2.3);
    // c.subscribe((data) => console.log('value: ' + data ));
    let d = b(c);
    d.subscribe((data) = > console.log('diablo: ' + data));
Copy the code



 let a = (x: number) = > x * x;
    let b = map(a);

    let c = of(1.2.3);
    // c.subscribe((data) => console.log('value: ' + data ));
    let d = b(c);
    d.subscribe((data) = > console.log('diablo: ' + data));

    let e = (x: number) = > x + x;
    let f = map(e);

    let g = f(d);
    g.subscribe((data) = > console.log('baal: ' + data));
Copy the code

Once the number of nested Operators increases, the code readability drops dramatically:

op4()(op3()(op2()(op1()(obs))))
Copy the code

Hence the Pipe method of the Observable.

Observable pipe reconstructs the Observable pipe method to improve readability:

Grammar:

obs.pipe(
  op1(),
  op2(),
  op3(),
  op3(),
)
Copy the code

In pipe, multiple operators are separated by commas. The names of operators are parenthesized to indicate the specific operation logic.

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: