Co to jest funkcja pipe () w Angular

Rury to filtry służące do przekształcania danych (formatów) w szablonie.

Natrafiłem na pipe()funkcję jak poniżej. Co pipe()dokładnie oznacza ta funkcja w tym przypadku?

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

Nie daj się zmylić z koncepcjami Angular i RxJS

Mamy koncepcję rur w Angular i pipe()funkcję w RxJS.

1) Rury w kątowych : Rura pobiera dane jako dane wejściowe i przekształca je w żądane wyjście
https://angular.io/guide/pipes

2) pipe()funkcja w RxJS : Możesz używać potoków do łączenia operatorów. Potoki pozwalają łączyć wiele funkcji w jedną funkcję.

pipe()Funkcja której argumentami są funkcje, które chcesz połączyć, i zwraca nową funkcję, która, gdy jest wykonywany, prowadzi złożone funkcje w kolejności.
https://angular.io/guide/rx-library (wyszukaj rury w tym adresie URL, możesz znaleźć to samo)

Więc zgodnie z twoim pytaniem odwołujesz się do pipe()funkcji w RxJS

Rury, o których mówisz w opisie początkowym, różnią się od rury, którą pokazałeś w przykładzie.

W Angular (2 | 4 | 5) potoki są używane do formatowania widoku, jak powiedziałeś. Myślę, że masz podstawową wiedzę na temat rur w Angular, możesz dowiedzieć się więcej na ten temat z tego linku - Angular Pipe Doc

W pipe()przykładzie pokazano pipe()metodę RxJS 5.5 (RxJS jest domyślną metodą dla wszystkich aplikacji Angular). W Angular5 wszystkie operatory RxJS mogą być importowane przy użyciu pojedynczego importu i są teraz łączone przy użyciu metody potoku.

tap()- Operator zaczepu RxJS spojrzy na Observable wartość i zrobi coś z tą wartością. Innymi słowy, po udanym żądaniu API tap()operator wykona dowolną funkcję, którą ma wykonać z odpowiedzią. W tym przykładzie po prostu zarejestruje ten ciąg.

catchError()- catchError robi dokładnie to samo, ale z odpowiedzią błędu. Jeśli chcesz zgłosić błąd lub chcesz wywołać jakąś funkcję, jeśli pojawi się błąd, możesz to zrobić tutaj. W tym przykładzie zadzwoni, handleError()a wewnątrz po prostu zarejestruje ten ciąg.

Operatory RxJS to funkcje, które opierają się na podstawie obserwabli, aby umożliwić wyrafinowaną manipulację zbiorami.

Na przykład, RxJS określa podmioty, takie jak map(), filter(), concat(), i flatMap().

Do łączenia operatorów można używać rur. Potoki pozwalają łączyć wiele funkcji w jedną funkcję.

pipe()Funkcja której argumentami są funkcje, które chcesz połączyć, i zwraca nową funkcję, która, gdy jest wykonywany, prowadzi złożone funkcje w kolejności.

Musisz zajrzeć do oficjalnej dokumentacji ReactiveX: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md .

To jest dobry artykuł o rurociągach w RxJS: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44 .

W skrócie .pipe () umożliwia łączenie wielu operatorów obsługujących potoki.

Począwszy od wersji 5.5, RxJS dostarcza "operatorów rurociągów" i zmienia nazwy niektórych operatorów:

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

Dwa bardzo różne typy rur kątowych - rury i RxJS - rury

Rura kątowa

Potok pobiera dane jako dane wejściowe i przekształca je w żądane wyjście. Na tej stronie użyjesz potoków do przekształcenia właściwości urodzin komponentu w przyjazną dla człowieka datę.

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 - Rura

Obserwowalne operatory są tworzone przy użyciu metody potoku znanej jako operatory potokowe. Oto przykład.

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));

Wynik tego w konsoli byłby następujący:

0

6

12

18

W przypadku dowolnej zmiennej przechowującej obserwowalną, możemy użyć metody .pipe () do przekazania jednej lub wielu funkcji operatorowych, które mogą pracować nad każdym elementem obserwowalnej kolekcji i przekształcać je.

W tym przykładzie każda liczba z zakresu od 0 do 10 mnoży się przez 2. Następnie funkcja filtrująca filtruje wynik tylko do liczb nieparzystych.