Skip to content

Instantly share code, notes, and snippets.

Avatar

Nya NyaGarcia

View GitHub Profile
@NyaGarcia
NyaGarcia / fromFetch.ts
Created Apr 24, 2020
Creating an Observable with fromFetch()
View fromFetch.ts
import { fromFetch } from "rxjs/fetch";
// This Observable will emit the entire Response object
const ghibliFilmResponse$ = fromFetch("https://ghibliapi.herokuapp.com/films");
ghibliFilmResponse$.subscribe(console.log);
// Output: Response {}
@NyaGarcia
NyaGarcia / of-random.ts
Created Apr 24, 2020
Creating an Observable of a function that returns a random value with of()
View of-random.ts
import { defer, of } from "rxjs";
const pokemon = ["Squirtle", "Charmander", "Bulbasaur", "Pikachu"];
function getRandomPokemon() {
return pokemon[Math.floor(Math.random() * 3)];
}
// Each subscriber to this Observable will receive the same value, because the getRandomPokemon function is executed once, when the Observable is created
const randomPokemon$ = of(getRandomPokemon());
@NyaGarcia
NyaGarcia / defer.ts
Last active Apr 24, 2020
Create Observables lazily with defer()
View defer.ts
import { defer, of } from "rxjs";
const pokemon = ["Squirtle", "Charmander", "Bulbasaur", "Pikachu"];
function getRandomPokemon() {
return pokemon[Math.floor(Math.random() * 3)];
}
// Each subscriber to this Observable will receive a random Pokemon because the getRandomPokemon function is executed with each subscription
const randomPokemonForReal$ = defer(() => of(getRandomPokemon()));
@NyaGarcia
NyaGarcia / timer.ts
Created Apr 24, 2020
Creating Observables with timer()
View timer.ts
import { timer } from "rxjs";
// Observable will emit one value (0) after 2s and complete
const onlyOneValue$ = timer(2000);
// Observable will wait 5s, then start emitting values every second
const number$ = timer(5000, 1000);
onlyOneValue$.subscribe(console.log);
@NyaGarcia
NyaGarcia / interval.ts
Created Apr 24, 2020
Creating Observables with interval()
View interval.ts
import { interval } from "rxjs";
// Observable will emit incremental numbers, one every second (1000ms)
const number$ = interval(1000);
// We didn't pass the interval size parameter, so default value is 0ms
const superFastNumber$ = interval();
number$.subscribe(console.log);
@NyaGarcia
NyaGarcia / fromEvent-subscription.ts
Created Apr 24, 2020
Subscribing to Observables created with fromEvent()
View fromEvent-subscription.ts
click$.subscribe(click => console.log(click));
// Output: MouseEvent {isTrusted: true}
keyPressed$.subscribe(console.log);
// Output: KeyboardEvent {isTrusted: true}
scroll$.subscribe(scroll => console.log(scroll));
// Output: UIEvent {isTrusted: true}
copie$.subscribe(console.log);
@NyaGarcia
NyaGarcia / of-from-comparation.ts
Last active Apr 23, 2020
Comparation of Observables created with from() and of()
View of-from-comparation.ts
const fruitsOf$ = of(["Strawberry", "Cherry"], ["Lemon", "Orange"]);
const fruitsFrom$ = from(["Strawberry", "Cherry", "Blackberry"]);
fruitOf$.subscribe(fruit => console.log(fruit));
// Output: ["Strawberry", "Cherry"] ["Lemon", "Cherry"]
fruitFrom$.subscribe(console.log);
// Output: "Strawberry", "Cherry", "Blackberry"
@NyaGarcia
NyaGarcia / from-subscription.ts
Created Apr 23, 2020
Subscribing to Observables created with from()
View from-subscription.ts
letter$.subscribe(letter => console.log(letter));
// Output: "R","x","J","S"," ","i","s"," ","c","o","o","l"
fruit$.subscribe(console.log);
// Output: "Strawberry", "Cherry", "Blackberry"
pokemon$.subscribe(console.log);
// Output: ["Squirtle", "Water"], ["Charmander", "Fire"], ["Bulbasur", "Grass"]
promise$.subscribe(promise => console.log(promise));
@NyaGarcia
NyaGarcia / from.ts
Last active Apr 23, 2020
Creating an Observable with from()
View from.ts
// Creating an Observable from an array of strings
const fruit$ = from(["Strawberry", "Cherry", "Blackberry"]);
// Creating an Observable from a Map object
const pokemon$ = from(
new Map([
["Squirtle", "Water"],
["Charmander", "Fire"],
["Bulbasur", "Grass"]
])
@NyaGarcia
NyaGarcia / of-subscription.ts
Created Apr 23, 2020
Subscribing to Observables created with of()
View of-subscription.ts
number$.subscribe(number => console.log(number));
// Output: 1 2 3 4 5
pokemon$.subscribe(pokemon => console.log(pokemon));
// Output: Squirtle Charmander Bulbasur
fruit$.subscribe(fruit => console.log(fruit));
// Output: ["Strawberry", "Cherry"] ["Lemon", "Cherry"]
iceCream$.subscribe(iceCream => console.log(iceCream));
You can’t perform that action at this time.