차이점은 무엇입니까?
예제에서 볼 수 있듯이 주요 차이점은 소스 코드의 가독성을 향상시키는 것입니다. 귀하의 예제에는 두 개의 함수 만 있지만 수십 개의 함수가 있다고 상상해보십시오. 그러면 그것은 같이 갈 것입니다
function1().function2().function3().function4()
특히 함수 내부를 채울 때 정말 추하고 읽기 어렵습니다. 또한 Visual Studio 코드와 같은 특정 편집기는 140 줄 이상을 허용하지 않습니다. 그러나 다음과 같이 진행되면.
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
이것은 가독성을 대폭 향상시킵니다.
차이가 없다면 함수 파이프가 존재하는 이유는 무엇입니까?
PIPE () 함수의 목적은 옵저버 블 을 가져오고 반환하는 모든 함수를 하나로 묶는 것입니다. 처음에는 observable을 취하고, 그 observable은 내부에 사용 된 각 함수에 의해 pipe () 함수 전체에서 사용됩니다.
첫 번째 함수는 관찰 가능 항목을 가져 와서 처리하고, 값을 수정하고, 다음 함수로 전달합니다. 다음 함수는 첫 번째 함수의 관찰 가능 항목을 가져 와서 처리하고 다음 함수로 전달한 다음 모든 함수가 끝날 때까지 계속됩니다. pipe () 함수 내부에서 Observable을 사용하면 마지막으로 처리 된 Observable이 있습니다. 마지막에 subscribe () 함수로 Observable을 실행하여 값을 추출 할 수 있습니다. 원래 Observable의 값은 변경되지 않습니다. !!
이러한 함수에 다른 가져 오기가 필요한 이유는 무엇입니까?
가져 오기는 rxjs 패키지에서 함수가 지정된 위치에 따라 다릅니다. 이렇게됩니다. 모든 모듈은 Angular의 node_modules 폴더에 저장됩니다. "모듈"에서 {클래스} 가져 오기;
다음 코드를 예로 들어 보겠습니다. 방금 stackblitz에 썼습니다. 따라서 자동으로 생성되거나 다른 곳에서 복사되는 것은 없습니다. 나는 당신이 가서 읽을 수있을 때 rxjs 문서에 명시된 것을 복사하는 요점을 보지 못합니다. 문서를 이해하지 못했기 때문에 여기서이 질문을했다고 가정합니다.
- 파이프, 관찰 가능한, 각 모듈에서 가져온 맵 클래스가 있습니다.
- 클래스 본문에서 코드에 표시된대로 Pipe () 함수를 사용했습니다.
Of () 함수는 구독 할 때 순서대로 숫자를 방출하는 Observable을 반환합니다.
Observable은 아직 구독하지 않았습니다.
Observable.pipe ()와 같이 사용했을 때 pipe () 함수는 주어진 Observable을 입력으로 사용합니다.
첫 번째 함수 인 map () 함수는 해당 Observable을 사용하여 처리하고 처리 된 Observable을 다시 pipe () 함수로 반환합니다.
처리 된 Observable이 있다면 다음 함수에 주어집니다.
모든 함수가 Observable을 처리 할 때까지 계속됩니다.
끝에서 Observable은 pipe () 함수에 의해 변수로 반환되며 다음 예제에서는 obs입니다.
이제 Observable의 것은 옵저버가 구독하지 않는 한 어떠한 값도 방출하지 않는다는 것입니다. 그래서 subscribe () 함수를 사용하여이 Observable을 구독하고 구독하자마자 사용했습니다. of () 함수는 값을 방출하기 시작하고 pipe () 함수를 통해 처리되고 최종 결과를 얻습니다. 예를 들어 1은 of () 함수에서 가져오고 1은 map () 함수에서 1을 더합니다. 돌아왔다. subscribe (function ( argument ) {}) 함수 내에서 해당 값을 인수로 가져올 수 있습니다 .
인쇄하려면 다음과 같이 사용하십시오.
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
pipe()당신이 만드는 것이 연산자를 통과하자?