Fin sección 4

alesyt0h · Sep 23, 2021 · b81a220 · b81a220
1 parent 4ad6161
commit b81a220
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 0 deletions.
diff --git a/src/observables/04-of.ts b/src/observables/04-of.ts
@@ -0,0 +1,15 @@
+import { of } from 'rxjs';
+
+// El of trabaja de manera síncrona -- Los valores deben de ser mandados con coma, si se mandara un arreglo se tomaria como un unico argumento, se podria usar el operador spread para mandar todos como valores individuales, produciendo lo mismo que sin [ ]
+// const obs$ = of<number>(1,2,3,4,5,6);
+// const obs$ = of<number>(...[1,2,3,4,5,6]);
+const obs$ = of<any>([1,2], {a: 1, b: 2}, function(){}, true, Promise.resolve(true));
+
+
+console.log('Inicio del Obs$');
+obs$.subscribe({
+    next: (next) => console.log('next:',next),
+    error: null,
+    complete: () => console.log('Terminamos la secuencia')
+});
+console.log('Fin del Obs$');
diff --git a/src/observables/05-fromEvent.ts b/src/observables/05-fromEvent.ts
@@ -0,0 +1,20 @@
+import { fromEvent } from 'rxjs';
+
+
+/**
+ * Eventos del DOM
+ */
+const src1$ = fromEvent<MouseEvent>(document,'click');
+const src2$ = fromEvent<KeyboardEvent>(document,'keyup');
+
+const observer = {
+    next: (value) => console.log('next:', value)
+};
+
+src1$.subscribe(({x,y}) => {
+    console.log(x,y);
+});
+
+src2$.subscribe(evento => {
+    console.log(evento.key)
+});
diff --git a/src/observables/06-range.ts b/src/observables/06-range.ts
@@ -0,0 +1,11 @@
+import { asyncScheduler, observeOn, of, range } from 'rxjs';
+
+// const src$ = of(1,2,3,4,5);
+
+// Use of asyncScheduler on range is deprecated, must use the pipe with observeOn
+// const src$ = range(1,5,asyncScheduler);
+const src$ = range(1,5).pipe(observeOn(asyncScheduler));
+
+console.log('inicio');
+src$.subscribe(console.log);
+console.log('fin');
diff --git a/src/observables/07-interval-timer.ts b/src/observables/07-interval-timer.ts
@@ -0,0 +1,21 @@
+import { timer, interval } from 'rxjs';
+
+const observer = {
+    next: (value) => console.log('next:',value),
+    complete: () => console.log('complete')
+}
+
+
+// Date tambien puede ser mandado a un timer
+const hoyEn5 = new Date(); // ahora
+hoyEn5.setSeconds(hoyEn5.getSeconds() + 5);
+
+
+const interval$ = interval(1000);
+// const timer$    = timer(2000,1000); // Inicia un intervalo de 1 segundo cada emisión DESPUÉS de que hayan pasado 2 segundos
+const timer$    = timer(hoyEn5);
+
+console.log('inicio');
+// interval$.subscribe(observer);
+timer$.subscribe(observer);
+console.log('fin');
diff --git a/src/observables/08-asyncScheduler.ts b/src/observables/08-asyncScheduler.ts
@@ -0,0 +1,36 @@
+import { asyncScheduler } from 'rxjs';
+
+// setTimeout (() => {}, 3000);
+// setInterval(() => {}, 3000);
+
+
+/**
+ * setTimeout pasado a async
+ */
+const saludar  = () => console.log('Hola Mundo');
+const saludar2 = (nombre) => console.log(`Hola ${nombre}`);
+const saludar3 = ({nombre, apellido}) => console.log(`Hola ${nombre}`);
+
+// asyncScheduler.schedule(saludar, 2000);
+// asyncScheduler.schedule(saludar2, 2000, 'Alejandro');
+asyncScheduler.schedule(saludar3, 2000, {nombre: 'Alejandro', apellido: 'Ortigosa'});
+
+
+/**
+ * setInterval pasado a async
+ */
+
+// Para un intervalo, no puede ser una función de flecha
+const subs = asyncScheduler.schedule(function(state){
+
+    console.log('state', state);
+
+    this.schedule(state + 1, 1000)
+
+}, 3000, 0 );
+
+// setTimeout(() => {
+//     subs.unsubscribe();
+// }, 6000);
+
+asyncScheduler.schedule( () => subs.unsubscribe(), 6000);
diff --git a/src/observables/09-from-avanzado.ts b/src/observables/09-from-avanzado.ts
@@ -0,0 +1,41 @@
+import { of, from } from 'rxjs';
+
+/**
+ * of = toma argumentos y genera una secuencia
+ * from = array, promise, iterable, observable
+ */
+
+const observer = {
+    next: (value) => console.log('next:',value),
+    complete: () => console.log('complete')
+}
+
+// const source$ = from([1,2,3,4,5]); // Output: 1, 2, 3, 4, 5
+// const source$ = of([1,2,3,4,5]);   // Output: [1, 2, 3, 4, 5]
+
+// const source$ = from('Alejandro'); // Output: A, l, e, j, a, n, d, r, o
+// const source$ = of('Alejandro');   // Output: Alejandro
+
+// const source$ = from(fetch('https://api.github.com/users/alesyt0h'));
+
+// source$.subscribe( async(resp) => {
+//     console.log(resp);
+
+//     const data = await resp.json()
+//     console.log(data)
+// });
+
+const miGenerador = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+    yield 4;
+    yield 5;
+}
+
+const miIterable = miGenerador();
+
+// for(let id of miIterable){
+//     console.log(id);
+// }
+from(miIterable).subscribe(observer);