O que é a função pipe () no Angular

Pipes são filtros para transformar dados (formatos) no modelo.

Me deparei com a pipe()função abaixo. O que essa pipe()função significa exatamente neste caso?

return this.http.get<Hero>(url)
  .pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
);

Não se confunda com os conceitos de Angular e RxJS

Temos conceito de tubos em Angular e pipe()função em RxJS.

1) Pipes em Angular : Um pipe recebe dados como entrada e os transforma na saída desejada
https://angular.io/guide/pipes

2) pipe()função em RxJS : Você pode usar tubos para vincular operadores. Pipes permitem combinar várias funções em uma única função.

A pipe()função leva como argumentos as funções que você deseja combinar e retorna uma nova função que, quando executada, executa as funções compostas em sequência.
https://angular.io/guide/rx-library (pesquise tubos neste URL, você pode encontrar o mesmo)

Então, de acordo com sua pergunta, você está se referindo a pipe()função em RxJS

Os tubos dos quais você está falando na descrição inicial são diferentes do tubo que você mostrou no exemplo.

Em Angular (2 | 4 | 5) Pipes são usados ​​para formatar a visualização como você disse. Eu acho que você tem um conhecimento básico sobre tubos no Angular, você pode aprender mais sobre isso neste link - Documento de tubos angulares

O que pipe()você mostrou no exemplo é o pipe()método de RxJS 5.5 (RxJS é o padrão para todos os aplicativos angulares). No Angular5, todos os operadores RxJS podem ser importados usando importação única e agora são combinados usando o método de tubo.

tap()- O operador tap RxJS vai olhar para o valor observável e fazer algo com esse valor. Em outras palavras, após uma solicitação de API bem-sucedida, o tap()operador executará qualquer função que você desejar com a resposta. No exemplo, ele apenas registrará aquela string.

catchError()- catchError faz exatamente a mesma coisa, mas com resposta de erro. Se você quiser lançar um erro ou quiser chamar alguma função se obtiver um erro, você pode fazer isso aqui. No exemplo, ele irá chamar handleError()e dentro disso, irá apenas registrar aquela string.

Operadores RxJS são funções que se baseiam na base dos observáveis ​​para permitir a manipulação sofisticada de coleções.

Por exemplo, RxJS define operadores tais como map(), filter(), concat(), e flatMap().

Você pode usar tubos para vincular operadores. Pipes permitem combinar várias funções em uma única função.

A pipe()função leva como argumentos as funções que você deseja combinar e retorna uma nova função que, quando executada, executa as funções compostas em sequência.

Você deve consultar a documentação oficial do ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

Este é um bom artigo sobre tubulação em RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

Resumindo, .pipe () permite o encadeamento de vários operadores de tubulação.

A partir da versão 5.5, o RxJS enviou "operadores canalizáveis" e renomeou alguns operadores:

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

Dois tipos muito diferentes de Pipes Angulares - Pipes e RxJS - Pipes

Angular-Pipe

Um tubo recebe dados como entrada e os transforma em uma saída desejada. Nesta página, você usará tubos para transformar a propriedade de aniversário de um componente em uma data amigável.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

RxJS - Pipe

Operadores observáveis ​​são compostos usando um método de tubulação conhecido como Operadores Canalizáveis. Aqui está um exemplo.

import {Observable, range} from 'rxjs';
import {map, filter} from 'rxjs/operators';

const source$: Observable<number> = range(0, 10);

source$.pipe(
    map(x => x * 2),
    filter(x => x % 3 === 0)
).subscribe(x => console.log(x));

A saída para isso no console seria a seguinte:

0

6

12

18

Para qualquer variável que contenha um observável, podemos usar o método .pipe () para passar uma ou várias funções de operador que podem trabalhar e transformar cada item na coleção observável.

Portanto, este exemplo pega cada número no intervalo de 0 a 10 e multiplica por 2. Em seguida, a função de filtro para filtrar o resultado apenas para os números ímpares.