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

¿Cuál es la diferencia entre Promisey Observableen Angular?

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

Promesa

A Promisemaneja un solo evento cuando una operación asincrónica se completa o falla.

Nota: Existen Promisebibliotecas que admiten la cancelación, pero ES6 Promiseno lo hace hasta ahora.

Observable

Un Observablees 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 Observablese prefiere sobre Promiseporque proporciona las características de Promisey más. Con Observableeso no importa si desea manejar 0, 1 o múltiples eventos. Puede utilizar la misma API en cada caso.

ObservableTambién tiene la ventaja Promisede 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 Subscriptionopción Observablepermite cancelar la suscripción, mientras Promiseque eventualmente llamará a la devolución exitosa o fallida incluso cuando no necesite la notificación o el resultado que proporciona más.

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

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

Ambos Promisesy Observablesnos 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 artículo

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 HTTPsolicitudes. 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.tsy 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 Jsonpservicio para realizar una GETsolicitud contra la API de Wikipedia con un término de búsqueda determinado. Tenga en cuenta que llamamos toPromisepara pasar de una Observable<Response>a una Promise<Response>. Finalmente, termina con a 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 nuestra WikipediaServicey exponemos su funcionalidad a través de un método de búsqueda a la plantilla. La plantilla simplemente se une al keyup y las llamadas search(term.value).

Desenvolvemos el resultado de la Promesa de que el método de búsqueda de WikipediaService regresa y lo exponemos como una simple Matriz de cadenas a la plantilla para que podamos *ngForrecorrerlo y crear una lista para nosotros.

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

Donde los observables realmente brillan

Cambiemos nuestro código para no dañar 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 lleve el término de búsqueda que el usuario ingresa. En lugar de vincular manualmente al evento keyup, podemos aprovechar la formControldirectiva de Angular . Para usar esta directiva, primero necesitamos importarla ReactiveFormsModuleen 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 FormControlfrom @angular/formy la exponemos como un campo bajo el término de nombre en nuestro componente.

Detrás de escena, el término expone automáticamente una Observable<string>propiedad como a la valueChangesque podemos suscribirnos. Ahora que tenemos una Observable<string>, superar la entrada del usuario es tan fácil como llamar debounceTime(400)a 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 distinctUntilChangedoperador justo después de que llamamosdebounceTime(400)

Vea el ejemplo de implementación observable en Plunker

Para tratar las respuestas fuera de orden, consulte el artículo completo http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

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

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 asynchronousmanera similar a 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 reevaluables por naturaleza, como reintentar y volver a intentar
• 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:

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

Hay una desventaja de los Observables que faltan en las respuestas. Las promesas permiten utilizar las funciones asincrónicas / en espera de ES7. Con ellos, puede escribir código asincrónico como si fuera una llamada de función sincrónica, 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?

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

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

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

Observable:

1. Observable es solo un functionque toma an observery devuelve un function Observer: an object with next, error.
2. El observador permite a subscribe/unsubscribesu flujo de datos, emitir el siguiente valor para el observador, notifyel observador errorse informar al observador sobre elstream completion
3. Observer proporciona function to handle next valueerrores y final de la secuencia (eventos de interfaz de usuario, respuestas http, datos con sockets web).
4. Trabaja con multiple valuesel tiempo
5. Es cancel-able/retry-abley es compatible con operadores como map,filter,reduceetc.
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 hacen resolved by a value;

3. Las promesas son rechazadas por excepciones;

4. No cancellabley vuelvea single value

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

   -entonces devuelve un nuevo promise;

   -Permite attachmentque se ejecute en función de state;

   - handlersson guaranteedpara ejecutar en order attached;

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 pueda llamarse nuevamente, pero en este caso, El método Promesa / .then fue ideal.

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:

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

Puede usar promesas en lugar de observables cuando llame a HTTP en Angular si lo desea.

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 se pueden cancelar 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 bien la resolución o rechazar que se llama la promesa pasa de un estado pendiente ya sea a un resueltos o rechazada estado. Cuando se resuelve el estado de la promesa then(), se llama al método. Cuando se rechaza el estado de promesa, catch()se llama al método.

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, a continuación, puede llamar onNext, onCompleted, onError. Luego, cuando el Observable esté suscrito, llamará a las devoluciones de llamada correspondientes que se pasaron a la suscripción.

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.

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.

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

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

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.

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

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

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. Otra ú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.

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.

Una promesa emite un solo evento cuando una actividad asíncrona finaliza o falla.

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

Frecuentemente se prefiere Observable sobre Promise ya que brinda los aspectos más destacados de Promise y más. Con Observable no importa si necesita manejar 0, 1 o varios eventos. Puede usar la API similar para cada caso.

Promesa: la promesa emite un valor único

Por ejemplo:

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

Observable: Emite valores múltiples durante un período de tiempo.

Por ejemplo:

  const numberObservable = new Observable((observer) => {
        observer.next(5);
        observer.next(10);
    });

numberObservable.subscribe(value => console.log(value));
// prints 5 and 10

Podemos pensar en un observable como un flujo que emite múltiples valores durante un período de tiempo y se llama a la misma función de devolución de llamada para cada elemento emitido, por lo que con un observable podemos usar la misma API para manejar datos asincrónicos. si esos datos se transmiten como un valor único o como valores múltiples durante un período de tiempo.

Promesa:

• Una promesa no es perezosa
• Una promesa no puede ser cancelada

Observable:

• Observable es perezoso. El "Observable" es lento. No se llama hasta que nos suscribamos.
• Un Observable puede cancelarse utilizando el método unsubscribe ()
• Un observable adicional proporciona muchos operadores potentes como mapa, foreach, filtro, reducir, reintentar, reintentar cuando etc.

Promesas angulares vs observables

Promise emite un único valor, mientras que Observable emite varios valores. Entonces, mientras maneja una solicitud HTTP, Promise puede administrar una sola respuesta para la misma solicitud, pero qué pasa si hay múltiples respuestas a la misma solicitud, entonces tenemos que usar Observable. Sí, Observable puede manejar múltiples respuestas para la misma solicitud.

Promesa

const promise = new Promise((data) =>
{ data(1);
  data(2);
  data(3); })
.then(element => console.log(‘Promise ‘ + element));

Salida

Promise 1

Observable

const observable = new Observable((data) => {
data.next(1);
data.next(2);
data.next(3);
}).subscribe(element => console.log('Observable ' + element));

Salida

Observable 1
Observable 2
Observable 3

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

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

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

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

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:

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

Si su componente se destruye antes de que se resuelva la promesa, recibirá un attempt to use destroyed viewerror 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

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.

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:

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

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:

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

etc.

Suscribirse: RxLogger.getInstance();

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

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 comomap, filter, pipe, map, concatMap etc

La diferencia básica entre observables y promesas son:

Los observables a menudo se comparan con las promesas. Aquí hay algunas diferencias clave:

Los observables son declarativos; El cálculo no comienza hasta la suscripción. Las promesas se ejecutan inmediatamente en la creación. Esto hace que los observables sean útiles para definir recetas que se pueden ejecutar siempre que necesite el resultado.

Los observables proporcionan muchos valores. Las promesas proporcionan una. Esto hace que los observables sean útiles para obtener múltiples valores a lo largo del tiempo.

Los observables diferencian entre encadenamiento y suscripción. Las promesas solo tienen cláusulas .then (). Esto hace que los observables sean útiles para crear recetas de transformación complejas para ser utilizadas por otras partes del sistema, sin que el trabajo se ejecute.

Observables subscribe () es responsable de manejar los errores. Las promesas empujan los errores a las promesas del niño. Esto hace que los observables sean útiles para el manejo centralizado y predecible de errores.

Esa es la diferencia más simple que puede encontrar en los documentos ANGULAR.IO. la respuesta de descanso es dada por la mayoría es correcta en su propio lugar

1. Las promesas se centran solo en valores individuales o resuelve, los observables son un flujo de datos.

2. Los observables pueden cancelarse pero las promesas no pueden cancelarse.

El menos conocido, al menos para mí es

3. Las promesas son siempre de naturaleza asincrónica, pero los observables pueden ser tanto sincrónicos como asincrónicos.

1. una promesa está ansiosa, mientras que un observable es perezoso,
2. una Promesa siempre es asíncrona, mientras que un Observable puede ser síncrono o asíncrono,
3. una Promesa puede proporcionar un valor único, mientras que un Observable es un
   flujo de valores (de 0 a múltiples valores),
4. puede aplicar operadores RxJS a un Observable para obtener una nueva secuencia personalizada.

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

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 simple proyecto de pasatiempo, 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.