angular - ejemplo - ¿Cuál es la diferencia entre Promesas y Observables?

promesas vs observables

Question

¿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?

Answer 1

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

Answer 2

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.

Answer 3

Visión general:

• 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.
• Una promesa solo puede manejar un evento, los observables son para flujos de eventos a lo largo del tiempo
• Las promesas no pueden cancelarse una vez que estén pendientes
• Los datos observables emitidos se pueden transformar utilizando operadores

Siempre puede usar un observable para tratar el comportamiento asincrónico, ya que un observable tiene todas las funciones que ofrece una promesa (+ extra). Sin embargo, a veces esta funcionalidad adicional que ofrece Observables no es necesaria. Entonces sería una sobrecarga adicional importar una biblioteca para que pueda usarlos.

Cuándo usar Promesas:

Use promesas cuando tenga una sola operación asincrónica de la cual desea procesar el resultado. Por ejemplo:

var promise = new Promise((resolve, reject) => {
  // do something once, possibly async
  // code inside the Promise constructor callback is getting executed synchronously

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//after the promise is resolved or rejected we can call .then or .catch method on it

promise.then((val) => console.log(val))      // logs the resolve argument
       .catch((val) => console.log(val));    // logs the reject argument

Entonces, una promesa ejecuta un código donde se resuelve o rechaza. Si se llama resolver o rechazar, la promesa pasa de un estado pendiente a un estado resuelto o rechazado . Cuando se resuelve el estado de promesa, se llama al método then() . Cuando se rechaza el estado de promesa, se llama al método catch() .

Cuándo usar Observables:

Use Observables cuando haya una secuencia (de datos) a lo largo del tiempo que necesite manejar. Una secuencia es una secuencia de elementos de datos que están disponibles a lo largo del tiempo . Ejemplos de transmisiones son:

1. Eventos de usuario, por ejemplo, eventos de clic o keyup. El usuario genera eventos (datos) con el tiempo.
2. Websockets, después de que el cliente realiza una conexión WebSocket con el servidor, empuja los datos con el tiempo.

En el Observable en sí se especifica cuándo ocurrió el siguiente evento , cuándo ocurre un error o cuando se completa el Observable. Entonces podemos suscribirnos a este observable, que lo activa y en esta suscripción, podemos pasar 3 devoluciones de llamada (no siempre tiene que pasar todas). Se debe ejecutar una devolución de llamada para el éxito, una devolución de llamada para error y una devolución de llamada para completar. Por ejemplo:

const observable = Rx.Observable.create(observer => {
  // create a single value and complete
  observer.onNext(1);
  observer.onCompleted();
});

source.subscribe(
  x => console.log(''onNext: %s'', x),   //  success callback
  e => console.log(''onError: %s'', e),  //  error callback
  () => console.log(''onCompleted'')     //  completion callback
 );

// first we log: onNext: 1
//  then we log: onCompleted

Al crear un observable, requiere una función de devolución de llamada que proporciona un observador como argumento. En este observador, puede llamar a onNext , onCompleted , onError . Luego, cuando el Observable esté suscrito, llamará a las devoluciones de llamada correspondientes que se pasaron a la suscripción.

Answer 4

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();
  });
}

3. 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.

4. 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.

Answer 5

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.

Answer 6

Algo con lo que me encontré que no era evidente en una primera lectura del tutorial y los documentos fue la idea de multidifusión.

Asegúrese de saber que, de forma predeterminada, las suscripciones múltiples desencadenarán múltiples ejecuciones en un Observable. Múltiples suscripciones a una sola llamada HTTP Observable activará múltiples llamadas HTTP idénticas a menos que usted .share() (habilite la multidifusión).

Una promesa lo obliga a lidiar con una cosa a la vez, desenvolver sus datos, manejar excepciones, tiene soporte de idioma para cosas interesantes como async / wait y, de lo contrario, es bastante básico.

Un Observable tiene muchas campanas y silbatos, pero necesita comprender el poder con el que está trabajando o puede ser mal utilizado.

Answer 7

La diferencia básica entre observables y promesas son:

Answer 8

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.

Answer 9

Si bien la respuesta aceptada es buena en general, no creo que haga hincapié en que cuando se trata de componentes angulares, casi siempre desea usar un Observable porque admite la cancelación. Las promesas no se pueden cancelar y se resolverán incluso si se destruye su componente. Angular tiende a ser indulgente hasta que no lo es.

Por ejemplo, cualquier detección de cambio manual en un componente destruido causará una excepción:

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

Si su componente se destruye antes de que se resuelva la promesa, recibirá un attempt to use destroyed view error cuando se resuelva la promesa.

Alternativamente, si utiliza observables con el patrón takeUntil , tan pronto como se destruya su componente, se cancelará la suscripción.

Este es un ejemplo un poco artificial, pero la ejecución de código para un componente que se destruye probablemente conducirá a errores. A menos que realmente quiera hacer eso por alguna razón: p

Answer 10

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));

Answer 11

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 .

Answer 12

Acabo de tratar un problema en el que Promesas era la mejor solución, y lo comparto aquí para cualquiera que se encuentre con esta pregunta en caso de que sea útil (esta fue exactamente la respuesta que estaba buscando antes):

En un proyecto Angular2, tengo un servicio que toma algunos parámetros y devuelve una lista de valores para completar los menús desplegables en un formulario. Cuando se inicializa el componente de formulario, necesito llamar al mismo servicio varias veces con diferentes parámetros para definir varios menús desplegables diferentes, sin embargo, si simplemente coloco todas las variables para llamar al servicio, solo el último tiene éxito y el resto error fuera. El servicio que obtiene de la base de datos solo puede manejar una solicitud a la vez.

La única forma de completar con éxito todas las variables del menú desplegable era llamar al servicio de una manera que impidiera que se procesara una nueva solicitud hasta que finalizara la última solicitud, y el mecanismo Promesa / .then resolvió el problema muy bien.

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList(''First-Val-List'')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList(''Second-Val-List'')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList(''Third-Val-List'')
          }).then(data => {
              this.thirdValList = data;
          })  }

Definí las funciones en el componente y luego llamé initializeDropDowns () en ngOnInit.

La función fetchValueList devuelve una Promesa, por lo que la primera llamada pasa el primer listCode y cuando la Promesa se resuelve, el valor devuelto está en la variable de datos en el bloque .then donde podemos asignarlo a la variable this.firstValList. Como la función ha devuelto datos, sabemos que el servicio ha finalizado y es seguro volver a llamar con el segundo listCode, el valor de retorno está en la variable de datos en el siguiente bloque .then y lo asignamos a la variable this.secondValList.

Podemos encadenar esto tantas veces como sea necesario para completar todas las variables, y en el último bloque de código simplemente omitimos la declaración de retorno y el bloque termina.

Este es un caso de uso muy específico en el que tenemos un único servicio que debe llamarse varias veces a medida que el componente se inicializa, y donde el servicio tiene que completar su recuperación y devolver un valor antes de que se pueda volver a llamar, pero en este caso, El método Promesa / .then fue ideal.

Answer 13

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 ;

Answer 14

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.

Answer 15

Hay una desventaja de los Observables que faltan en las respuestas. Las promesas permiten utilizar las funciones async / wait de ES7. Con ellos puede escribir código asincrónico como si fuera una llamada de función síncrona, por lo que ya no necesita devoluciones de llamada. La única posibilidad para que los Observables hagan esto es convertirlos en Promesas. Pero cuando los convierte en Promesas, solo puede volver a tener un valor de retorno:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with ''data'' (no callback function needed)
}

Lectura adicional: ¿Cómo puedo `esperar ''en un Rx Observable?

Answer 16

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.

Answer 17

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

Answer 18

Tanto Promises como Observables nos proporcionan abstracciones que nos ayudan a lidiar con la naturaleza asincrónica de nuestras aplicaciones. La diferencia entre ellos fue señalada claramente por @ Günter y @Relu.

Dado que un fragmento de código vale más que mil palabras, pase por el siguiente ejemplo para comprenderlo más fácilmente.

Gracias @ Christoph Burgdorf por el increíble article

Angular usa Rx.js Observables en lugar de promesas para tratar con HTTP.

Suponga que está creando una función de búsqueda que debería mostrarle resultados instantáneamente a medida que escribe. Suena familiar, pero hay muchos desafíos que vienen con esa tarea.

• No queremos llegar al punto final del servidor cada vez que el usuario presiona una tecla, debería inundarlos con una tormenta de solicitudes HTTP . Básicamente, solo queremos presionarlo una vez que el usuario ha dejado de escribir en lugar de con cada pulsación de tecla.
• No golpee el punto final de búsqueda con los mismos parámetros de consulta para solicitudes posteriores.
• Manejar respuestas fuera de orden. Cuando tenemos varias solicitudes en vuelo al mismo tiempo, debemos tener en cuenta los casos en que vuelven en un orden inesperado. Imagine que primero escribimos computadora , paramos, se apaga una solicitud, escribimos auto , paramos, se apaga una solicitud. Ahora tenemos dos solicitudes en vuelo. Desafortunadamente, la solicitud que lleva los resultados para la computadora regresa después de la solicitud que lleva los resultados para el automóvil .

La demostración consistirá simplemente en dos archivos: app.ts y wikipedia-service.ts . Sin embargo, en un escenario del mundo real, probablemente dividiríamos las cosas más arriba.

A continuación se muestra una implementación basada en Promise que no maneja ninguno de los casos límite descritos.

wikipedia-service.ts

import { Injectable } from ''@angular/core'';
import { URLSearchParams, Jsonp } from ''@angular/http'';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set(''action'', ''opensearch'');
    search.set(''search'', term);
    search.set(''format'', ''json'');
    return this.jsonp
                .get(''http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK'', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

Estamos inyectando el servicio Jsonp para realizar una solicitud GET contra la API de Wikipedia con un término de búsqueda determinado. Observe que llamamos a toPromise para pasar de un Observable<Response> a un Promise<Response> . Finalmente, termina con una Promise<Array<string>> como el tipo de retorno de nuestro método de búsqueda.

app.ts

// check the plnkr for the full list of imports
import {...} from ''...'';

@Component({
  selector: ''my-app'',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;

  constructor(private wikipediaService: WikipediaService) {}

  search(term) {
    this.wikipediaService.search(term)
                         .then(items => this.items = items);
  }
}

No es una gran sorpresa aquí tampoco. Inyectamos nuestro Servicio WikipediaService y exponemos su funcionalidad a través de un método de búsqueda a la plantilla. La plantilla simplemente se une al keyup y llama a la search(term.value) .

Desenvolvemos el resultado de la Promesa de que el método de búsqueda del Servicio Wikipedia regresa y lo exponemos como una simple Matriz de cadenas a la plantilla para que podamos tener *ngFor bucle *ngFor través de él y construir una lista para nosotros.

Vea el ejemplo de implementación basada en Plunker en Plunker

Donde los observables realmente brillan

Cambiemos nuestro código para no martillar el punto final con cada pulsación de tecla, sino que solo enviaremos una solicitud cuando el usuario dejó de escribir durante 400 ms

Para revelar tales superpoderes, primero debemos obtener un Observable<string> que contenga el término de búsqueda que el usuario ingresa. En lugar de vincular manualmente al evento keyup, podemos aprovechar la directiva formControl de Angular. Para usar esta directiva, primero tenemos que importar ReactiveFormsModule en nuestro módulo de aplicación.

app.ts

import { NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { JsonpModule } from ''@angular/http'';
import { ReactiveFormsModule } from ''@angular/forms'';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Una vez importado, podemos usar formControl desde nuestra plantilla y configurarlo con el nombre "término".

<input type="text" [formControl]="term"/>

En nuestro componente, creamos una instancia de FormControl desde @angular/form y la exponemos como un campo bajo el término de nombre en nuestro componente.

Detrás de escena, el término expone automáticamente un Observable<string> como cambio de valor de propiedad valueChanges que podemos suscribirnos. Ahora que tenemos un Observable<string> , superar la entrada del usuario es tan fácil como llamar a debounceTime(400) en nuestro Observable . Esto devolverá un nuevo Observable<string> que solo emitirá un nuevo valor cuando no haya habido nuevos valores durante 400 ms.

export class App {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
              .debounceTime(400)        // wait for 400ms pause in events
              .distinctUntilChanged()   // ignore if next search term is same as previous
              .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

Sería un desperdicio de recursos enviar otra solicitud de un término de búsqueda para el que nuestra aplicación ya muestra los resultados. Todo lo que tenemos que hacer para lograr el comportamiento deseado es llamar al operador distinctUntilChanged justo después de llamar a debounceTime(400)

Vea el ejemplo de implementación observable en Plunker

Para tratar las respuestas fuera de orden, consulte el artículo completo article

En cuanto a que estoy usando Http en Angular, estoy de acuerdo en que en los casos de uso normal no hay mucha diferencia cuando uso Observable sobre Promise. Ninguna de las ventajas es realmente relevante aquí en la práctica. Espero poder ver algún caso de uso avanzado en el futuro :)

Aprende más

• https://angular-2-training-book.rangle.io/handout/observables/
• https://angular.io/tutorial/toh-pt6#observables

Answer 19

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:

Answer 20

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

Answer 21

Respuesta corta :

Observable es mejor , tiene todas las características de Promises más características adicionales.

Respuesta larga:

Promesas:

• Uso único "Devolver datos una vez"
• No cancelar
• Un oyente
• No Socket Support One Listener

Observable:

• Devolver datos muchas veces a medida que cambian los datos
• Soporte cancelar
• Socket de soporte
• Admite muchos oyentes y notifícalos cuando cambien los datos
• Mapa de soporte, filtro, reducir

Answer 22

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.

Answer 23

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