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
