No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creaci贸n de un Observable

6/36
Recursos

Aportes 10

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

En esta clase crear谩s tu primer observable 馃槉.

Estos son los comandos para crear la carpetas de ejercicios de RxJS:

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

Tambi茅n puedes acceder al repositorio de este curso donde se encuentran los archivos de configuraci贸n (como webpack.config.js).

Estoy tomando el curso, pero usando Typescript.
Aqu铆 el ejemplo del profe.

import { Observable, Subscriber } from "rxjs";

// Las variables que sean observables se les argega el $
const observableAlfa$ = new Observable<number | string>(subscriber => {
	subscriber.next(1); //Dentro del flujo de informaci贸n del observable solo hay numeros.
	subscriber.next(2);
	subscriber.complete();
	subscriber.next(20);
});

//Se va a crear un observador que se subscribir谩 al observable.
const observator = {
	next: (value: number | string) => {
		console.log(`The value is: ${value}`)
	},
	complete: () => {
		console.log(`The observable has no values`)
	},
	error: (error: Error) => {
		console.error(error.message);
	}
}

observableAlfa$.subscribe(observator);

Para los que quieran usar typescript instalan ts-loader

npm install ts-loader --save-dev

Y pegan esto en webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
}

Create project

mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli

Create
webpack.config.js


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

Add script start to package.json (optional --open)

"start": "webpack serve --open"

  • Create index.js and index.html
    public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Curso RXJS</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

src/index.js

import { Observable } from "rxjs";

// agregar $ al final
const observableAlfa$ = new Observable(suscriber => {
  suscriber.next(10);
  suscriber.next(2);
  suscriber.next(3);
  suscriber.next(1);
  suscriber.complete() //observable finished
  //suscriber.error('Error en el flujo') //observable finished
})

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

observableAlfa$.subscribe(observador);

  • npm start to start the project

NOTAS:

  • La convenci贸n al nombrar los observables es que se les coloque un signo $ al final. Eso es lo que distingue a los observables.
    Ejemplo:
const observableAlfa$ = new Observable;
  • En el observador s贸lo el m茅todo next y error emiten valores, emiten informaci贸n, next emite el valor en s铆 y el error el error.
    Ejemplo:
const observador = {
    next: (value) => {},
    complete: () => {},
    error: (error) => {},
};

Rx es la creme de la creme _

Pero que clase tan buena鈥!!

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)

Creaci贸n de proyecto con vite.js

npm create vite@latest course-rxjs
cd course-rxjs
npm install
npm i rxjs
npm run serve

el Observer es un callback