Creación de un Observable

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:59

Creación de un Observable

Curso de Programación Reactiva con RxJS

Clase 6 de 36

Clase 6 / 36

Platzi Team

Hace 3 años

Creacion de un Observable

Para este ejecicio lo haremos en Js asi que para eso, primero inicalizacimos nuestro proyecto de npm y instalamos la dependencia de RsJS y Webpack para el renderizado de nuestra aplicacion:

npm init -yes
npm i rxjs
npm i webpack webpack-dev-server

y luego configuramos webpack:

const path = require('path');
module.exports = {
	module: {	},
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	}
}

creamos un nuevo script en nuestro package.json:

{
	...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack serve --open --mode development" 
  },
	...
  "dependencies": {
    "rxjs": "^7.8.1",
    "webpack": "^5.87.0",
    "webpack-dev-server": "^4.15.1"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }

Y ahora creamos nuestro observable

En primer lugar, se importa la clase Observable de la librería RxJS.

import { Observable } from 'rxjs'

A continuación, se crea una instancia de Observable llamada observableAlfa$. El signo '$' al final del nombre es una convención que indica que es un Observable.

const observableAlfa$ = new Observable(suscriber => {
	suscriber.next('Alfa')
	suscriber.next('Beta')
	suscriber.next('Gamma')
	suscriber.next('Delta')
	suscriber.error('Error')
	suscriber.complete()
});

En este caso, se emiten varios eventos utilizando el método next() del suscriptor. Los valores 'Alfa', 'Beta', 'Gamma' y 'Delta' son enviados secuencialmente como eventos.
Después, se simula un error utilizando el método error() del suscriptor. Esto provoca que el Observable emita un error.
Finalmente, se llama al método complete() del suscriptor para indicar que la emisión de eventos ha finalizado.

A continuación, se define un objeto llamado observador que tiene tres métodos: next, error y complete. Cada uno de estos métodos simplemente imprime el valor recibido en la consola.

const observador = {
	next: (value) => { console.log(value) },
	error: (error) => { console.log(error) },
	complete: () => { console.log('complete') }
}

Finalmente, se suscribe el objeto observador al Observable observableAlfa$ utilizando el método subscribe(). Esto significa que el objeto observador actuará como el suscriptor y recibirá los eventos emitidos por observableAlfa$.

observableAlfa$.subscribe(observador)

Comentarios (15)15 comentarios

Marcelo Arias

Profesor

Hace 4 años

Víctor Andrés Córdova Poma

Santiago Dulcey

Ramiro De La Cruz Navarro

Yamid Noguera

Diego Fernando Caviedes Camaho

Felipe de Jesús Ramirez Rodriguez

Marcelino Sosa A

Manuela Barba Guerra

Alex hernandez mitre

Carlos Dugarte

Carlos Andrés Pupiales Córdoba

Elmer Danilo Hernandez

Andres Ossa

Hace 8 meses

Hace 6 meses

Angie Loreina García Delgado

Tanelo Mondaca Silva

Luis Dominguez

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

Creación de un Observable