Saltar al contenido

rxjs angulares tutoriales para crear observablesJan, 4thIn este tutorial, vamos a aprender acerca de lo que es un observable …

marzo 13, 2020

 

En este tutorial, vamos a aprender sobre qué es un observable y cómo crear sus propios observables utilizando rxjs.

Angular utiliza los observables para el manejo de las tareas asíncronas como peticiones http y EventEmitters.In el router angular, observables se usan para actualizar los datos params ruta.

Rxjs

RxJS es una biblioteca de JavaScript para la programación reactiva utilizando observables, lo que hace más fácil trabajar con un código asíncrono o de base de devolución de llamada.

Rxjs nos ofrece un tipo diferente de funciones para crear un nuevo observable.

¿Cuáles son observables?

  • observables son las funciones que pueden devolver un solo valor o valores incluso múltiples en secuencia y que pueden manejar ambas tareas síncronos y asíncronos.
  • observables sólo se puede ejecutar cuando se suscribe a los datos.

crear nuestra propia observables de

Let aprender mediante la creación de nuestros propios utilizando rxjs observables.

Este tutorial asume que ya ha creado un nuevo proyecto utilizando CLI angular.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit() {
const observable1 = new Observable(subscriber => { subscriber.next(1); subscriber.next(2); subscriber.next(3); }); });}

En el código anterior, primero se importó constructor observable desde el paquete rxjs y estamos pasando una función como primer argumento.

Mediante el uso de método subscriber.next estamos pasando a tres valores 1,2,3 en secuencia.

Invocación observables

Creación de un observable no hará nada tenemos que invocar la observables mediante subscribe methodprovided por el constructor observable.

La suscribirse método toma el objeto observador como su argumento.

Observador: es un conjunto de devoluciones de llamada que sabe escuchar a los valores entregados por el observable.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit() {
const observable1 = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
});

observable1.subscribe({ next: (val) => console.log(val) }); }
}

Ahora, ejecute el proyecto y abrir su navegador verá tres valores de registro se muestran que son 1,2,3 que proviene de nuestra observable.

Una lata observable también tienen un error y el método completa que ayuda en el trabajo con tareas asíncronas como http solicitudes debido a que en estos casos no se dispone de datos de forma inmediata para que nuestros reacciona observadores a los futuros datos disponibles en observable.

En algunos casos, también puede obtener un error de observación y reacciona a ese error también.

error método : Se ejecuta cuando se produce un error

método completo : Se ejecuta cuando se ha completado una tarea determinada. La actualización de

dejar que nuestros observable mediante la adición de estos dos métodos. En

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit() {
const observable1 = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.error(setTimeout(() => {
return 'this is err msg';
}, 3000));

// once we call complete the below code can't execute
subscriber.complete();
subscriber.next(3); // this line is unreachable });

observable1.subscribe({
next: (val) => console.log(val),
error: (errormsg) => console.log(errormsg), complete: () => console.log('task is completed') });
}
}

del código anterior, hemos añadido método de error al pasar un método setTimeout de manera que podemos ver un msg de error en nuestra consola después de 3s.

Una vez que llamamos método completo en observable el siguiente código no alcanzable como en JavaScript funciones de código no es accesible después de la palabra clave de retorno.

Integrados observables

Rxjs nos puede dar alguna incorporada observables vamos a ver intervalo observable.

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit() {
const observable = interval(1000);
observable.subscribe({
next: (val) => console.log(val)
});
}
}

Ahora bien, este intervalo observables empujará nuevo valor al suscriptor en cada 1s.

Baja del método

Por defecto, las suscripciones están habilitadas llamando suscribirse método, pero nuestras suscripciones están activos hasta wecall método de cancelación de suscripción que se proporciona por el método de suscripción.

Ejemplo: En youtube, si hacemos clic en el icono de campana notificaciones están habilitadas y empezamos a recibir las nuevas actualizaciones relacionadas con ese canal pero en el futuro, no necesitamos subscripción que necesitamos para darse de baja ella.

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit() {
const observable = interval(1000);

const subscription = observable.subscribe({
next: (val) => console.log(val)
});

// by calling this method we are cancelling our subscription
subscription.unsubscribe(); }
}

En el ejemplo anterior, estamos darse de baja de la suscripción observable intervalo por el método callingunsubscribe.