fromFetch

Clase 31 de 36 • Curso de Programación Reactiva con RxJS

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

Comentarios

Brandon Maciel

student•

Cómo puedo usar Múltiples suscripciones ?

Marcelo Arias

teacher•

¡Hola Brandom! Para usar múltiples suscripciones puedes usar el método subscribe() después del observable. Por ejemplo, usando el observable fromFetch de esta clase, quedaría así:

// Declaramos el observable
const obs$ = fromFetch(url);

// Realizamos las suscripciones
const subscription1 = obs$.subscribe((data) => console.log(data));
const subscription2 = obs$.subscribe((data) => console.log(data));
const subscription3 = obs$.subscribe((data) => console.log(data));

Luego si nos queremos desuscribir de algún observable, usamos el método unsubscribe() sobre la suscripción ya creada.

subscription1.unsubscribe();

Andrés Villarraga

student•

Muy buena forma de manejar el Abort en el request, si lo usa Netflix es por algo, hice la prueba y en el Network Tab no se recibe respuesta, igual que con AbortController pero más facil de usar.

SANTIAGO SIERRA HERRERA

student•

Por qué se usó MergeMap en vez de un map simple?

Marcelo Arias

teacher•

¡Hola Santiago! En este caso usamos mergeMap porque debemos combinar dos operadores en un único flujo.

SANTIAGO SIERRA HERRERA

student•

Hola Marcelo, pero es que no entiendo que se está combinando. Por ejemplo en el punto del siguiente código se utiliza pero no veo que dos flujos se combinan

 const url = "https://httpbin.org/delay/4";
 const ditto$ = fromFetch(url).pipe(
	mergeMap((response) => {
      return response.json();
  })
);

ditto$.subscribe(console.log);

David Trespalacios

student•

Perfecto, esto responde mi pregunta en el video anterior. Ahora podemos implementar palabras aleatorias a PlatziWordle desde una API

const urlWord =
  "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5";

const getFetch$ = fromFetch(urlWord).pipe(
  mergeMap((response) => {
    return response.json();
  }),
  catchError((err) => of(err))
);

getFetch$.subscribe(console.log);

Marcelo Arias

teacher•

fromFetch es un operador para realizar peticiones HTTP que internamente utiliza Fetch API.

// Declaramos el observable
const obs$ = fromFetch(url);

// Realizamos las suscripciones
const subscription1 = obs$.subscribe((data) => console.log(data));
const subscription2 = obs$.subscribe((data) => console.log(data));
const subscription3 = obs$.subscribe((data) => console.log(data));

const urlWord =
  "https://clientes.api.greenborn.com.ar/public-random-word?c=1&l=5";

const getFetch$ = fromFetch(urlWord).pipe(
  mergeMap((response) => {
    return response.json();
  }),
  catchError((err) => of(err))
);

getFetch$.subscribe(console.log);

fromFetch

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