promesas - subscribe angular 2




¿Cuál es la diferencia entre Promesas y Observables? (16)

A continuación se presentan algunas diferencias importantes en promesas y observables.

Promesa

  • Emite solo un valor único
  • No cancelable
  • No compartible
  • Siempre asíncrono

Observable

  • Emite valores múltiples
  • Se ejecuta solo cuando se llama o alguien se suscribe
  • Puede ser cancelable
  • Se pueden compartir y suscribir ese valor compartido por varios suscriptores. Y todos los suscriptores se ejecutarán en un solo punto de tiempo.
  • posiblemente asincrónico

Para una mejor comprensión, consulte https://stackblitz.com/edit/observable-vs-promises

¿Alguien puede explicar la diferencia entre Promise y Observable en Angular?

Un ejemplo de cada uno sería útil para comprender ambos casos. ¿En qué escenario podemos usar cada caso?


Tanto Promises como Observables nos ayudan a lidiar con operaciones asincrónicas. Pueden llamar a ciertas devoluciones de llamada cuando se realizan estas operaciones asincrónicas.

Angular usa Observables que es de RxJS en lugar de promesas para tratar con HTTP

Below are some important differences in promises & Observables.


Promesa vs similitud observable primero

  1. Ambos solían manejar código asíncrono.
  2. Por favor, busque ejemplo de promesa. Promise constructor pasa una función de referencia de resolución que se llamará cuando se llame con algún valor al completar alguna tarea asincrónica.
ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}
  1. Ejemplo observable ahora. Aquí también pasamos una función a observable, un observador para manejar la tarea asincrónica. A diferencia de la resolución en la promesa, tiene el siguiente método y se suscribe en ese momento.

  2. Entonces ambos manejan tareas asíncronas. Ahora veamos la diferencia.

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

Promesa vs diferencia observable

Promesa

  1. Resuelve o rechaza un valor único y puede manejar una tarea asíncrona de valor único a la vez.
  2. Una promesa una vez resuelto el valor asíncrono que completa, ya no se puede usar. Solo se usa una vez y aquí se queda corto.
  3. No cancelable
  4. No hay soporte de rxjs para los operadores.

Observable

  1. capacidad de emitir múltiples valores asincrónicos.
  2. Se usa para manejar la secuencia de eventos o valores. Tenga en cuenta que tiene una gran variedad de tareas o valores, y desea que cada vez que se inserte un valor en este se maneje automáticamente. Cada vez que inserta un valor en esta matriz, todos sus suscriptores recibirán el último valor automáticamente.
  3. Los observables son útiles para observar cambios de entrada, intervalos repetidos, valores de difusión a todos los componentes secundarios, notificaciones push de socket web, etc.
  4. Se puede cancelar mediante el método de cancelación de suscripción en cualquier momento.
  5. Una última buena parte que promete es el soporte para operadores de rxjs. Tiene muchos operadores de tuberías, principalmente mapas, filtros, switchMap, combineLatest, etc. para transformar datos observables antes de suscribirse.


Promesa:

  • Proporcionar un único valor futuro;
  • No perezoso;
  • No cancelable;

Observable:

  • Emite múltiples valores a lo largo del tiempo;
  • Perezoso;
  • Para interrumpir;
  • Soporta operadores de mapa, filtro, reducción y similares.

Si lo desea, puede usar promesas en lugar de observables cuando llame a HTTP en Angular.


La diferencia básica entre observables y promesas son:


Observables and Promises nos están ayudando a trabajar con las funcionalidades asincrónicas en JavaScript / typecript. Son muy similares en muchos casos, sin embargo, todavía hay algunas diferencias entre ellos.


Veo a muchas personas usando el argumento de que Observable son "cancelables", pero es bastante trivial hacer que Promise sea "cancelable"

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));


Ya hay muchas respuestas sobre este tema, así que no agregaría una redundante.

Pero para alguien que acaba de comenzar a aprender Observable / Angular y se pregunta cuál usar en comparación con Promise , le recomendaría que mantenga todo Observable y convierta todas las Promesas existentes en su proyecto en Observable.

Simplemente porque el marco angular en sí y su comunidad están utilizando Observable. Por lo tanto, sería beneficioso integrar servicios de marco o módulos de terceros y encadenar todo.

Si bien aprecio todos los votos negativos, pero insisto en mi opinión anterior, a menos que alguien haga un comentario adecuado para enumerar algunos escenarios que aún podrían ser útiles en su proyecto Angular para usar Promesas sobre Observables.

Por supuesto, ninguna opinión es 100% correcta en todos los casos, pero al menos creo que el 98% del tiempo para proyectos comerciales regulares implementados en un marco angular, Observable es el camino correcto.

Incluso si no te gusta en el punto de partida de tu proyecto de pasatiempo simple, pronto te darás cuenta de que casi todos los componentes con los que interactúas en Angular, y la mayoría del marco de terceros amigable de Angular está usando Observables, y luego podrás terminó convirtiendo constantemente su Promesa en Observable para comunicarse con ellos.

Esos componentes incluyen, entre otros: HttpClient, Form Builder, Módulos / cuadros de diálogo de material angular, Ngrx store / effects y ngx-bootstrap.

De hecho, la única promesa del ecosistema angular con la que traté en los últimos 2 años es APP_INITIALIZER .


Aunque esta respuesta llega tarde, he resumido las diferencias a continuación,

Observable:

  1. Observable es solo una function que toma an observer y devuelve una function Observer: an object with next, error.
  2. El observador permite subscribe/unsubscribe de subscribe/unsubscribe a su flujo de datos, emitir el siguiente valor para el observador, notify al observador sobre los errors e informar al observador sobre la stream completion
  3. Observer proporciona una function to handle next value , los errores y el final de la transmisión (eventos ui, respuestas http, datos con sockets web).
  4. Funciona con multiple values largo del tiempo.
  5. Es cancel-able/retry-able y admite operadores como map,filter,reduce etc.
  6. Crear un Observable puede ser - Observable.create() - devuelve Observable que puede invocar métodos en - Observer Observable.from() - convierte una matriz o iterable en - Observable Observable.fromEvent() - convierte un evento en Observable - Observable.fromPromise() - convierte una Promesa en Observable - Observable.range() - devuelve una secuencia de enteros en el rango especificado

Promesa :

  1. Una promesa representa una tarea que terminará en el futuro;

  2. Las promesas se resolved by a value ;

  3. Las promesas son rechazadas por excepciones;

  4. No cancellable y devuelve a single value

  5. Una promesa expone una función (then)

    -entonces devuelve una nueva promise ;

    -permite que el attachment se ejecute según el state ;

    - los handlers están guaranteed para ejecutarse en order attached ;


Creo que todas las otras respuestas deberían aclarar tus dudas. Sin embargo, solo quería agregar que los observables se basan en la programación funcional, y encuentro muy útiles las funciones que vienen con él como map, flatmap, reduce, zip. La consistencia que logra la web, especialmente cuando depende de las solicitudes de API, es una mejora brutal.

Recomiendo esta documentación , ya que es la documentación oficial de reactiveX y creo que es la más clara que existe.

Si desea entrar en observables, sugeriría esta publicación de 3 partes: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Aunque está destinado a RxJava, los conceptos son los mismos y está muy bien explicado. En la documentación reactiveX, tiene las equivalencias para cada función. Debes buscar RxJS.


Promesa: proporcione un único valor futuro. No perezoso . No cancelable Rechazará o resolverá.

Observable: proporciona un valor futuro múltiple. Perezoso Cancelable Proporciona otros métodos de mapa en vivo, filtro, reducción.


Promises y Observables manejan la llamada asincrónica solamente.

Aquí están las diferencias entre ellos:

Observable

  1. Emite valores múltiples durante un período de tiempo
  2. No se llama hasta que nos suscribamos al Observable
  3. Se puede cancelar mediante el método unsubscribe ()
  4. Proporciona el mapa, para cada uno, filtra, reduce, vuelve a intentar y vuelve a intentar cuando los operadores

Promesa

  1. Emite solo un valor a la vez

  2. Llama a los servicios sin .then y .catch

  3. No se puede cancelar

  4. No proporciona ningún operador


Tanto Promises como Observables nos ayudarán a trabajar con las funcionalidades asincrónicas en JavaScript. Son muy similares en muchos casos, sin embargo, todavía hay algunas diferencias entre los dos, las promesas son valores que se resolverán de manera asynchronous como las llamadas http . Por otro lado, los observables tratan con una secuencia de eventos asincrónicos . Las principales diferencias entre ellos se enumeran a continuación:

promesa:

  • teniendo una tubería
  • por lo general solo se usa con retorno de datos asíncrono
  • no es fácil de cancelar

observable:

  • son cancelables
  • son recuperables por naturaleza, como reintentar y reintentar
  • transmitir datos en múltiples canalizaciones
  • tener operaciones tipo matriz como mapa, filtro, etc.
  • se puede crear desde otras fuentes como eventos
  • son funciones que podrían suscribirse más adelante

Además, he creado la imagen gráfica para ti a continuación para mostrar las diferencias visualmente:


Promesa:

Un controlador de eventos asíncrono: el objeto Promise representa la finalización (o falla) eventual de una operación asincrónica y su valor resultante.

Sintaxis: nueva promesa (ejecutor);

P.ej:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

Acerca de Promise: tiene una canalización, por lo que devolverá valores solo una vez cuando se llame. es un controlador unidireccional, por lo que una vez llamado, es posible que no pueda cancelar. sintaxis útil con la que puedes jugar, cuando () y luego ()

Observables:

Los observables son colecciones perezosas de múltiples valores a lo largo del tiempo. Es realmente un gran enfoque para las operaciones asíncronas. se puede hacer con rxjs que tiene soporte multiplataforma que se puede usar con angular / reaccionar, etc.

actúa como un transatlántico. puede ser de múltiples tuberías. así que una vez definido, puede suscribirse para obtener resultados de retorno en muchos lugares.

Sintaxis: import * as Rx from "@reactivex/rxjs"; para iniciar:

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

etc.

Suscribirse: RxLogger.getInstance();

P.ej:

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

Dado que admite múltiples canalizaciones, puede suscribirse a resultados en una ubicación diferente, tiene muchas posibilidades que las promesas.

Uso: tiene más posibilidades como map, filter, pipe, map, concatMap etc


Promesa

Una Promise maneja un solo evento cuando una operación asincrónica se completa o falla.

Nota: Existen bibliotecas de Promise que admiten la cancelación, pero ES6 Promise no lo hace hasta ahora.

Observable

Un Observable es como un Stream (en muchos idiomas) y permite pasar cero o más eventos donde se llama la devolución de llamada para cada evento.

A menudo, Observable se prefiere a Promise porque proporciona las características de Promise y más. Con Observable no importa si desea manejar 0, 1 o múltiples eventos. Puede utilizar la misma API en cada caso.

Observable también tiene la ventaja sobre Promise de ser cancelable . Si el resultado de una solicitud HTTP a un servidor o alguna otra operación asíncrona costosa ya no es necesaria, la Subscription de un Observable permite cancelar la suscripción, mientras que una Promise eventualmente llamará la devolución exitosa o fallida incluso cuando no necesita la notificación o el resultado que proporciona más.

Observable proporciona operadores como map , forEach , reduce , ... similar a una matriz

También hay operadores poderosos como retry() o replay() , ... que a menudo son bastante útiles.


Promesas

  1. Definición: lo ayuda a ejecutar funciones de forma asincrónica y a usar sus valores de retorno (o excepciones) pero solo una vez cuando se ejecuta.
  2. No perezoso
  3. No cancelable (existen bibliotecas de Promise que admiten la cancelación, pero ES6 Promise no lo hace hasta ahora). Las dos decisiones posibles son
    • Rechazar
    • Resolver
  4. No se puede volver a intentar (las promesas deben tener acceso a la función original que devolvió la promesa de tener una capacidad de reintento, lo cual es una mala práctica)

Observables

  1. Definición: lo ayuda a ejecutar funciones de forma asincrónica y a utilizar sus valores de retorno en una secuencia continua ( varias veces ) cuando se ejecuta.
  2. Por defecto, es perezoso ya que emite valores cuando pasa el tiempo.
  3. Tiene muchos operadores que simplifica el esfuerzo de codificación.
  4. Un reintento de operador se puede usar para reintentar cuando sea necesario, también si necesitamos volver a intentar el observable en función de algunas condiciones reintentarCuando se puede usar.

    Nota : Una lista de operadores junto con sus diagramas interactivos está disponible aquí en RxMarbles.com







angular-observable