Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

ajax

Comentarios

Marcelo Arias

teacher•

Una de las formas en las que podemos realizar peticiones HTTP en RxJS es a través del objeto Ajax.

En esta clase usaremos los siguientes endpoints de APIs:

https://pokeapi.co/api/v2/pokemon/itto
https://httpbin.org/delay/2

📁 Puedes ver el código de esta clase en el repositorio.

Wilmer David Cedeño Mendoza

student•

En este comentario se coloco el pokemon como **itto **y no ditto. Seria bueno si lo pudiesen corregir

Daniel Meza

student•

¿El subscribe a obs$ de ajax se destruye al recibir respuesta del API, o también deberíamos manejar esa suscripción?

Marcelo Arias

teacher•

¡Hola Daniel!

Sí, después de recibir la respuesta de la API, el observable se completa. Por lo tanto se termina la suscripción.

Además, si la API retorna un error (por ejemplo 404), el observable envía una señal de error. Y también se termina la sucripción.

David Trespalacios

student•

Se me ocurrió buscar una API que me devuelva palabras en español, para luego implementarlo en PlatziWordle y encontré esta:

Palabras al azar

muy bueno porque puedo hacer get de una palabra con longitud 'x'

sin embargo, no logro que me funcione con rxjs/ajax. Pero con fetch de js vanilla, sin problema. Que puede ser?

//Codigo con js
const url = "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5";
fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data));

//Codigo con ajax
import { ajax, } from "rxjs/ajax";
import { of, map, catchError } from "rxjs";

const url = "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5";
const word = ajax(url).pipe(
  map((response) => console.log("response: ", response)),
  catchError((error) => {
    console.log("error: ", error);
    return of(error);
  })
);

//Error devuelto
{
    "message": "ajax error",
    "name": "AjaxError",
    "xhr": {},
    "request": {
        "async": true,
        "crossDomain": false,
        "withCredentials": false,
        "method": "GET",
        "timeout": 0,
        "responseType": "json",
        "url": "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5",
        "headers": {
            "x-requested-with": "XMLHttpRequest"
        }
    },
    "status": 0,
    "responseType": "json",
    "response": null
}```

sospecho que puede ser debido a la respuesta de la API en de tipo XML, que opinan?

//Codigo con ajax
import { ajax, } from "rxjs/ajax";
import { of, map, catchError } from "rxjs";

const url = "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5";
const word = ajax(url).pipe(
  map((response) => console.log("response: ", response)),
  catchError((error) => {
    console.log("error: ", error);
    return of(error);
  })
);

//Error devuelto
{
    "message": "ajax error",
    "name": "AjaxError",
    "xhr": {},
    "request": {
        "async": true,
        "crossDomain": false,
        "withCredentials": false,
        "method": "GET",
        "timeout": 0,
        "responseType": "json",
        "url": "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5",
        "headers": {
            "x-requested-with": "XMLHttpRequest"
        }
    },
    "status": 0,
    "responseType": "json",
    "response": null
}```

sospecho que puede ser debido a la respuesta de la API en de tipo XML, que opinan?

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS

ajax