RxJS Map, Tap and Take in Angular
5212 단어 angularjavascriptrxjs
이제 연산자를 지정합니다. 먼저 값을 변환해 보겠습니다.
값을 변환하기 위해 어떤 연산자를 사용합니까? 당신이 지도를 말했다면, 당신은 정확합니다. 맵을 사용하여 방출된 값을 변환하고 2를 곱합니다.
The observable pipe method take any number of operators separated by commas.
두 번째 맵 연산자를 추가하여 값을 다시 변환하고 10을 뺍니다. 이제 변환된 항목이 콘솔에 표시됩니다.
from ([20, 15, 10, 5]).pipe(
map(item => item * 2),
map(item => item -10)
).subscribe({
next: (item) => console.log(`resulting item.. ${item}` ),
error: (err) => console.log(`error occoured ${err}`),
complete: () => console.log('Completed')
})
원래 생략된 항목도 기록하려면 시퀀스 시작 부분에 탭을 추가해 보겠습니다.
이제 변환된 결과 항목과 함께 원래 생략된 항목을 확인합니다.
Notice the 0 we see here in the result.
from ([20, 15, 10, 5]).pipe(
tap(item => console.log(`emitted item ... ${item}`)),
map(item => item * 2),
map(item => item -10),
map(item => {
if(item === 0){
throw new Error ('Zero detected');
}
return item;
})
).subscribe({
next: (item) => console.log(`resulting item.. ${item}` ),
error: (err) => console.log(`error occoured ${err}`),
complete: () => console.log('Completed')
})
오류 처리를 시도하고 0에 대한 검사를 추가해 봅시다. 오류 처리를 위해 지도 연산자를 사용할 것입니다. 지도는 항목을 가져옵니다. 여러 줄을 실행하려면 중괄호로 정의된 함수 본문이 필요합니다. 그것은 우리의 단일 라인 화살표 기능을 다중 라인 화살표 기능으로 바꿉니다.
if 문을 사용하여
0
값을 확인하고 0
가 감지되면 오류를 발생시킵니다. 그렇지 않으면 항목을 반환합니다.Note that we need the
return
keyword in this case. One-line arrow function have implied return.
여러 줄 화살표 함수를 사용할 때 명시적인 return 문이 필요합니다.
가져가다
마지막으로 테이크를 추가하고 항목 중 3개만 가져갑시다. 더 이상 오류가 표시되지 않습니다. 오류가 있는 항목이 방출되기 전에 처음 세 항목을 가져와 완료합니다.
from ([20, 15, 10, 5]).pipe(
tap(item => console.log(`emitted item ... ${item}`)),
map(item => item * 2),
map(item => item -10),
map(item => {
if(item === 0){
throw new Error ('Zero detected');
}
return item;
}),
take(3)
).subscribe({
next: (item) => console.log(`resulting item.. ${item}` ),
error: (err) => console.log(`error occoured ${err}`),
complete: () => console.log('Completed')
})
app.component.ts 파일
import { Component, VERSION, OnInit } from '@angular/core';
import {of, from, map, tap, take} from 'rxjs'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular ' + VERSION.major;
ngOnInit(){
from ([20, 15, 10, 5]).pipe(
tap(item => console.log(`emitted item ... ${item}`)),
map(item => item * 2),
map(item => item -10),
map(item => {
if(item === 0){
throw new Error ('Zero detected');
}
return item;
}),
take(3)
).subscribe({
next: (item) => console.log(`resulting item.. ${item}` ),
error: (err) => console.log(`error occoured ${err}`),
complete: () => console.log('Completed')
})
}
}
지도 연산자 내부
import { Observable } from 'rxjs';
export function map(fn) {
// function
return (
input // takes an input Observable
) =>
new Observable((observer) => {
// creates an output Observable
return input.subscriber({
// subscribes to the input Observable
next: (value) => observer.next(fn(value)), // transform item using provided function and emits item
error: (err) => observer.error(err), // emits error notification
complete: () => observer.complete(), // emits complete notification
});
});
}
Reference
이 문제에 관하여(RxJS Map, Tap and Take in Angular), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bipon68/rxjs-map-tap-and-take-in-angular-lh9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)