Se finaliza la Sección 3 del curso - Observables

src/index.ts

@@ -1,10 +1,8 @@
+import { Observable, Subscriber, Observer, Subject } from "rxjs";
 
-
-console.log('Hola Mundo!');
-
-
-
-
-
-
+const observer: Observer<any> = {
+  next: value => console.log("siguiente [next] ", value),
+  error: error => console.warn("error [obs]", error),
+  complete: () => console.info("completado [obs]")
+};
 

src/observables/01-observable.ts

@@ -0,0 +1,54 @@
+import { Observable, Subscriber, Observer } from "rxjs";
+
+// const obs$ = Observable.create();
+
+// Tercera forma
+const observer: Observer<any> = {
+  next: value => console.log("siguiente [next] ", value),
+  error: error => console.warn("error [obs]", error),
+  complete: () => console.info("completado [obs]")
+};
+
+const obs$ = new Observable<string>(subs => {
+  // Permitir realizar subscripciones
+  subs.next("Hola");
+  subs.next("Mundo");
+
+  subs.next("Hola");
+  subs.next("Mundo");
+
+  // forzando error , y tiene que suceder antes del complete
+
+  const a = undefined;
+  a.nombre = "pedro";
+
+  // finaliza
+  subs.complete();
+
+  // ya no funcionan despúes de un complete
+  subs.next("Hola");
+  subs.next("Mundo");
+});
+
+// Primera forma
+// obs$.subscribe( resp => {
+//     console.log(resp)
+//     });
+
+// Segunda Forma
+// obs$.subscribe(
+//     // Definir 3 callback (funciones)
+//     valor => console.log('next', valor),
+//     error => console.warn('error',error),
+//     ()=> console.log('Completado')
+// );
+
+// Tercera forma
+obs$.subscribe(observer);
+
+/**=========================================================================================================
+ *  Notas
+     - No es conveniente dejar los observables de tipo unknow , siempre definir el tipo de observable
+     - Luego de complete finaliza la subcrición, cualquier llamada posterior no se emitirá 
+
+=========================================================================================================**/

src/observables/02-unsubscribe-add.ts

@@ -0,0 +1,56 @@
+import { Observable, Subscriber, Observer } from "rxjs";
+
+const observer: Observer<any> = {
+  next: value => console.log("siguiente [next] ", value),
+  error: error => console.warn("error [obs]", error),
+  complete: () => console.info("completado [obs]")
+};
+
+const intervalo$ = new Observable<number>(subscriber => {
+  let contador = 0;
+  // Crear un contador 1,2,3,4,5......
+  const interval = setInterval(() => {
+    // Cada segundo
+    contador++;
+    subscriber.next(contador);
+    console.log(contador); // sigue emitiendo los valores
+  }, 1000); // un segundo
+
+  setTimeout(() => {
+    subscriber.complete();
+  }, 2500);
+
+  return () => {
+    // Establecemos el procedimiento cuando se realiza el unsubscribe()
+    // limpiar interval
+    clearInterval(interval);
+    console.log("intervalo destruido");
+  };
+});
+
+const subs1 = intervalo$.subscribe(observer);
+const subs2 = intervalo$.subscribe(observer);
+const subs3 = intervalo$.subscribe(observer);
+
+// Terminar observable en cadena
+subs1.add(subs2).add(subs3);
+
+// Se cancelará la subscripción a los 3 segundos
+setTimeout(() => {
+  subs1.unsubscribe();
+  //const subs2 = intervalo$.subscribe( num => console.log('Num:', num));
+  //   subs2.unsubscribe();
+  //   subs3.unsubscribe();
+
+  console.log("Completado timeout");
+}, 6000); // 6 segundos
+
+/**=========================================================================================================
+ *  Notas
+     - Cuando uno se subscribe crea una nueva instancia del observable
+     - Se utiliza setInterval()
+     - clearInterval(interval) : limpia cada uno de los subcribe()  para evitar la emisión de valores
+     - Terminar observable en cadena
+     - El complete() no es lo mismo que el unsubscribe()
+
+=========================================================================================================**/

src/observables/03-subject.ts

@@ -0,0 +1,63 @@
+import { Observable, Subscriber, Observer, Subject } from "rxjs";
+
+const observer: Observer<any> = {
+  next: value => console.log("siguiente [next] ", value),
+  error: error => console.warn("error [obs]", error),
+  complete: () => console.info("completado [obs]")
+};
+
+
+// Subject
+
+const intervalo$ = new Observable<number>( subs => {
+    // Esté emitiendo numeros random
+
+    const intervalID = setInterval( () => subs.next(Math.random()),3000
+    );
+
+
+    return () =>{
+        clearInterval(intervalID);
+        console.log('Intervalo destruido'); // no se ha destruido ya que no se ejcuta hasta que se llame el unsiscribe del subject
+    };
+});
+
+/* Caracteristicas 
+*    1- Casteo multiple     : muchas suscripciones va estar sujestas a un 
+*                             mismo observable y sirve para distribuir la misma info a todos 
+*                             los lugares donde les interese esa suscripcion
+*    2-También es un observer  
+*    3-También se puede utilizar next, error y complete
+*/
+
+
+const subject$ = new Subject();
+
+// Enlazar subject
+const intervalSubject = intervalo$.subscribe(subject$);
+
+
+
+
+// Nos creamos las subscripciones que serán las mimas gracias al subject
+const subs1 = subject$.subscribe( observer );
+const subs2 = subject$.subscribe( observer );
+
+
+setTimeout(()=>{
+    // subject tiene los mismo metodos que un obs
+    subject$.next(10);
+
+    subject$.complete();
+
+    intervalSubject.unsubscribe(); // aqui termina las suscricion del subject
+},3500);
+
+
+/**=========================================================================================================
+ *  Notas
+     - Cuando la data producida por el obs en sí mismo, es considerado como un "Cold Observable"
+       Pero la data es producida fuera del observable es llamado "Hot Observable"
+       En pocas palabras un subject nos permite a nosotros transformar un cold obs en un hot obs
+     
+=========================================================================================================**/