Last active
February 1, 2024 19:48
-
-
Save kockono/98f5813b5ab91eca39b10ed1b9163fa2 to your computer and use it in GitHub Desktop.
Rxjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = interval(1000); | |
source.pipe(auditTime(2000)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source1$ = timer(1000, 2000); | |
const source2$ = timer(2000, 1000); | |
combineLatest(source1$, source2$).subscribe(([value1, value2]) => { | |
console.log(value1, value2); | |
}); | |
// Output: 0 0, 1 0, 1 1, 2 1, 3 1, ... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Ejemplo con concat | |
const source1 = of('A', 'B', 'C'); | |
const source2 = of('D', 'E', 'F'); | |
const resultConcat = concat(source1, source2); | |
resultConcat.subscribe(value => console.log(value)); | |
// Salida: A, B, C, D, E, F |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = of(1, 2, 3); | |
const example = source.pipe( | |
concatMap(value => of(value * 2)) | |
); | |
example.subscribe(console.log); // Output: 2, 4, 6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const click$ = fromEvent( document, 'click' ); | |
click$.pipe( | |
debounceTime(3000) // 3000ms = 3s | |
).subscribe( console.log); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const numeros$ = of<number | string>(12,3,4,5,67,2,8,8,634,62345,23,1,11,1,12,2,'1') | |
numeros$.pipe( | |
distinct() // === También especifica el tipado osea '1' != 1 | |
).subscribe(console.log) | |
interface Personaje { | |
nombre:string; | |
} | |
const personajes:Personaje[] = [ | |
{ | |
nombre: 'Zero' | |
}, | |
{ | |
nombre: 'Z' | |
}, | |
{ | |
nombre: 'Zero' | |
}, | |
] | |
from(personajes).pipe( | |
distinct(p => p.nombre) // Estara al pendiente de p.nombre | |
) // No repitio el nombre de Zero | |
.subscribe(console.log); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Si el valor anterior no es diferente no lo emite | |
of(1, 1, 2, 2, 3, 1, 2, 3).pipe( | |
distinctUntilChanged() | |
).subscribe(result => console.log(result)); | |
// Output: 1, 2, 3, 1, 2, 3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = of(1, 2, 3); | |
source.pipe(endWith(4)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
of(1, 2, 3, 4, 5).pipe( | |
filter(value => value % 2 === 0) | |
).subscribe(result => console.log(result)); | |
// Output: 2, 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { of } from 'rxjs'; | |
import { first } from 'rxjs/operators'; | |
const observable = of(1, 2, 3); | |
observable.pipe(first((value) => value > 1)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// forkJoin emite solo una vez que todos los observables han completado. | |
// combineLatest emite cada vez que se emite un valor | |
const observable1$ = of('Hello'); | |
const observable2$ = of('World'); | |
const observable3$ = of('!'); | |
forkJoin([observable1$, observable2$, observable3$]).subscribe(result => { | |
console.log(result); | |
}); | |
// Output: ['Hello', 'World', '!'] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const array = [1, 2, 3]; | |
const observable = from(array); | |
observable.subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
of(1, 2, 3).pipe( | |
map(value => value * 2) | |
).subscribe(result => console.log(result)); | |
// Output: 2, 4, 6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const observable = of(1, 2, 3); | |
observable.pipe(mapTo('Hola')).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
of('Hello', 'World').pipe( | |
mergeMap(value => of(value + ' RxJS!')) | |
).subscribe(result => console.log(result)); | |
// Output: Hello RxJS!, World RxJS! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let count = 0; | |
of('Hello').pipe( | |
map(() => { | |
if (count < 2) { | |
count++; | |
throw new Error('Error occurred'); | |
} | |
return 'Success'; | |
}), | |
retry(2) | |
).subscribe(result => console.log(result)); | |
// Output: Success |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { interval, fromEvent } from 'rxjs'; | |
import { sample } from 'rxjs/operators'; | |
const source = interval(1000); | |
const click = fromEvent(document, 'click'); | |
source.pipe(sample(click)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = interval(1000); | |
source.pipe(sampleTime(2000)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { of } from 'rxjs'; | |
import { skip } from 'rxjs/operators'; | |
const observable = of(1, 2, 3, 4, 5); | |
observable.pipe(skip(2)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = of(1, 2, 3); | |
source.pipe(startWith(0)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const subscription: Subscription = interval(1000).subscribe((num: number) => { | |
console.log(num); | |
}); | |
// Cancelar la suscripción después de 5 segundos | |
setTimeout(() => { | |
subscription.unsubscribe(); | |
console.log('Suscripción cancelada'); | |
}, 5000); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = of(1, 2, 3); | |
source.pipe(switchMap((value) => interval(value * 1000))).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { of } from 'rxjs'; | |
import { take } from 'rxjs/operators'; | |
const observable = of(1, 2, 3); | |
observable.pipe(take(2)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Creamos un observable que emite valores cada segundo | |
const source = interval(1000); | |
// Creamos un observable que se completará después de 5 segundos | |
const timer$ = timer(5000); | |
// Utilizamos el operador takeUntil para completar el flujo de datos de source cuando timer$ emite | |
const example = source.pipe(takeUntil(timer$)); | |
// Suscribimos y mostramos los valores emitidos hasta que timer$ complete | |
example.subscribe(value => console.log(value)); | |
// Salida esperada: | |
// 0 | |
// 1 | |
// 2 | |
// 3 | |
// 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { of } from 'rxjs'; | |
import { takeWhile } from 'rxjs/operators'; | |
const observable = of(1, 2, 3, 4, 5); | |
observable.pipe(takeWhile((value) => value <= 3)).subscribe((value) => { | |
console.log(value); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const observable = of(1, 2, 3); | |
observable.pipe(tap((value) => console.log(value))).subscribe(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const source = interval(1000); | |
source.pipe(throttleTime(2000)).subscribe((value) => { | |
console.log(value); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment