Fin de sección 8

src/ajax/01-ajax-catchErrors.ts

@@ -0,0 +1,68 @@
+
+import { ajax, AjaxError } from 'rxjs/ajax';
+import { map, pluck, catchError } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+const url= 'https://api.github.com/users?per_page=5';
+
+// Manejo de errores
+
+const manejaErrores= (response: Response) =>{
+
+  if (!response.ok) {
+    throw new Error( response.statusText );
+  }
+  return response; // en caso de no tenen errores
+}
+
+const atrapaError = (err:AjaxError) => {
+    console.warn('error en : ', err.message);
+    return of([]); // retornar un objeto vacío
+
+}
+
+// Metodo FETCH
+// const fetchPromesa = fetch(url);
+
+// fetchPromesa
+//  .then( resp => resp.json()) // en caso que se haga correctamente
+//  .then( data => console.log('data:', data)) // para ller la información
+//  .catch(err => console.warn('error en usuarios',err)) // en caso de error
+
+// Cadena de promesas
+// fetchPromesa
+//   .then( manejaErrores)
+//   .then(resp => resp.json()) // en caso que se haga correctamente
+//   .then(data => console.log('data:', data)) // para ller la información
+//   .catch(err => console.warn('error en usuarios', err)) // en caso de error
+
+ajax( url ).pipe(
+  // map( resp => resp.response)
+  pluck('response'),
+  catchError(atrapaError)
+)
+.subscribe(users => console.log('usuarios', users));
+
+/**
+ *
+ ==========================================================================================================================
+   Notas : Peticiones Ajax, aun tiene caracteristicas experimentales
+    -  El ajax de rxjs : resuelve pero eñ fetch api aun no lo puede ver
+    -  El fetch trabaja en base a promesas y no a string  de información
+    -  Manejo de errores en fetch Api : tengo que evaluar si sucedio un error antes  de pasar al siguiente paso
+    - esto añade un paso más de complejidad en mi cadena de promesas
+
+    - Para que se dispare el catch debo disparar un throw en las promesas
+
+    - Utilizacion de ajax rxjs
+
+
+
+    - Operador CathErroor : sirve para atrapar cualquier error que sucesa en el observable
+    
+    - a b error  --> aqui podemos decidir que hacer , si retornar un mensaje de error o un observable inmediatamente 
+               1 2 3  --> cuando este observable se completa se completa la subscripción
+    - a b
+          
+=============================================================================================================================
+**/

src/ajax/02-getJSON.ts

@@ -0,0 +1,23 @@
+
+import { ajax } from 'rxjs/ajax';
+
+
+const url = 'https://httpbin.org/delay/1'; // api para realizar pruebas
+
+const obs$ = ajax.getJSON(url,{
+  'Content-Type':'aplication/json',
+  'mi-token':'ABC123'
+});
+
+obs$.subscribe( data => console.log('data:',data));
+
+
+
+/**
+ *
+ ==========================================================================================================================
+   Notas : Peticiones Ajax - getJSON()
+    -  Podemos ver la data junto con los headers , configurandolo como segundo argumento
+          
+=============================================================================================================================
+**/

src/ajax/03-diff-ajax-getJSON-catchError.ts

@@ -0,0 +1,64 @@
+
+import { ajax, AjaxError } from 'rxjs/ajax';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+
+const url = 'https://httpbin.org/delays/1'; // api para realizar pruebas
+
+
+const manejaError = ( resp:AjaxError ) => {
+  console.warn('error:',resp.message );
+  return of({
+    ok:false,
+    usuarios: []
+  })
+}
+
+// Diferencias
+const obs$ = ajax.getJSON(url);
+const obs2$ = ajax(url);
+
+
+// obs$.pipe(
+//   catchError(manejaError)
+// ).subscribe( data => console.log('getJSON:',data));
+
+
+// obs2$.pipe(
+//   catchError(manejaError)
+// )
+// .subscribe(data => console.log('ajax:', data));
+
+
+// obs$.pipe(
+//   catchError(manejaError)
+// ).subscribe(data => console.log('getJSON:', data));
+// obs2$.pipe(
+//   catchError(manejaError)
+// )
+//   .subscribe(data => console.log('ajax:', data));
+
+
+// Otra forma de manejar los errores
+obs$.pipe(
+  catchError(manejaError) // se dispara el next  y se completa el error utilizando el maneja error
+)
+.subscribe({
+  next: val => console.log('next:', val),
+  error: err => console.warn('error en subs:', err),
+  complete: () => console.log('complete')
+})
+
+
+/**
+ *
+ ==========================================================================================================================
+   Notas : Peticiones Ajax - getJSON()
+    -  Podemos ver la data junto con los headers , configurandolo como segundo argumento
+      ¿ Cual es la diferencia entre el getJSON y la petición normal?   
+
+
+
+=============================================================================================================================
+**/

src/ajax/04-put-post-delete.ts

@@ -0,0 +1,68 @@
+
+import { ajax } from 'rxjs/ajax';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+
+const url = 'https://httpbin.org/delay/1'; // api para realizar pruebas
+
+// GET
+ajax.get(url,{
+
+})
+
+// POST
+ajax.post(url,{
+  id:1,
+  nombre:'Peter'
+},{
+  'mi-token': 'ABC123'
+}).subscribe(console.log);
+
+// PUT
+ajax.put(url, {
+  id: 1,
+  nombre: 'Peter'
+}, {
+  'mi-token': 'ABC123'
+}).subscribe(console.log);
+
+// DELETE
+ajax.delete(url, {
+
+})
+
+
+// Otra forma de llamar peticiones en caso que quedramos saber que tipo de petición es
+
+ajax({
+  // configuramos nuestro objeto
+  // url:url,// esmascrip6 la propiedad y el nombre de variable se llaman igual podemos colocar solo el nombre de la propiedad
+  url,
+  method:'DELETE',
+  headers:{
+    'mi-token':'ABC123'
+  },
+  body:{
+    id:1,
+    nombre:'Peter'
+  }
+}).subscribe(console.log);
+
+
+
+
+
+/**
+ *
+ ==========================================================================================================================
+   Notas : Métodos Post,Put y Delete
+           indispensables para una comunicación entre el front-end y el back-end
+
+  GET:     envia url y headers
+  POST:    envia url,body y headers
+  PUT:     envia url,body y headers
+  DELETE:  envia url y headers
+
+=============================================================================================================================
+**/

src/index.ts

@@ -1,37 +1,11 @@
-import { fromEvent, interval } from 'rxjs';
-import { map, sampleTime, sample, auditTime, tap } from 'rxjs/operators';
-
-
-// observables
-
-const click$ = fromEvent<MouseEvent>(document, 'click');
-
-
-click$.pipe(
-  map( ({ x }) => x),
-  tap( val => console.log('tap:',val)),
-  auditTime(5000) 
-)
-.subscribe( console.log);
-
 
 
 
 
 /**
  *
- =====================================================================================================================
-   Notas : Operadores 
-    -  auditTime() : emite el ultimo valor que ha sido emitido por el observable en un periodo de tiempo determinado
-
-    abc --> comienza a emitir valores con el timpo del observable
-      c  
-
-
-      El objetivo principal de los operadores de tiempos 
-      Es ayudarnos a controlar observabke que pueden estar emitiendo valores muy rapidos o mucho spam
-      
+ ==========================================================================================================================
+   Notas : 
 
-          
-=========== ===================================================================================================================
+=============================================================================================================================
 **/