Ambos Promisese Observablesnos fornecem abstrações que nos ajudam a lidar com a natureza assíncrona de nossos aplicativos. A diferença entre eles foi apontada claramente por @ Günter e @Relu.
Como um trecho de código vale mais que mil palavras, vamos seguir o exemplo abaixo para entendê-las mais facilmente.
Obrigado @Christoph Burgdorf pelo artigo incrível
Angular usa Rx.js Observables em vez de promessas para lidar com HTTP.
Suponha que você esteja criando uma função de pesquisa que mostre resultados instantaneamente enquanto você digita. Parece familiar, mas há muitos desafios que acompanham essa tarefa.
- Não queremos atingir o ponto final do servidor toda vez que o usuário pressionar uma tecla, ela deve inundá-los com uma tempestade de
HTTPsolicitações. Basicamente, queremos apenas pressioná-lo quando o usuário parar de digitar em vez de pressionar cada tecla.
- Não atinja o ponto de extremidade de pesquisa com os mesmos parâmetros de consulta para solicitações subsequentes.
- Lidar com respostas fora de ordem. Quando temos várias solicitações em andamento ao mesmo tempo, devemos considerar os casos em que elas retornam em ordem inesperada. Imagine que primeiro digitamos computador , paramos, uma solicitação sai, digitamos carro , paramos, uma solicitação sai. Agora, temos dois pedidos em voo. Infelizmente, a solicitação que carrega os resultados para o computador volta após a solicitação que carrega os resultados para o carro .
A demonstração consiste simplesmente em dois arquivos: app.tse wikipedia-service.ts. Em um cenário do mundo real, provavelmente dividiríamos ainda mais as coisas.
Abaixo está a implementação baseada em promessa que não lida com nenhum dos casos extremos 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 injetando o Jsonpserviço para fazer uma GETsolicitação na API da Wikipedia com um determinado termo de pesquisa. Observe que chamamos toPromisepara passar de um Observable<Response>para um Promise<Response>. Eventualmente, acabam com a Promise<Array<string>>como o tipo de retorno do nosso método de pesquisa.
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);
}
}
Não é muita surpresa aqui também. Injetamos nossa WikipediaServicee expomos sua funcionalidade por meio de um método de pesquisa ao modelo. O modelo simplesmente liga-se a keyup e chamadas search(term.value).
Desembrulhamos o resultado da Promessa de que o método de pesquisa do WikipediaService retorna e o expomos como uma Matriz simples de seqüências de caracteres para o modelo, para que possamos fazer um *ngForloop e criar uma lista para nós.
Veja o exemplo de implementação baseada em promessa no Plunker
Onde os Observáveis realmente brilham
Vamos alterar nosso código para não martelar o ponto final a cada pressionamento de tecla, mas enviar apenas uma solicitação quando o usuário parar de digitar por 400 ms
Para revelar essas superpotências, primeiro precisamos obter um Observable<string>que carregue o termo de pesquisa digitado pelo usuário. Em vez de vincular manualmente ao evento keyup, podemos tirar proveito da formControldiretiva da Angular . Para usar essa diretiva, primeiro precisamos importar o arquivo para o ReactiveFormsModulenosso módulo de aplicativo.
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 {}
Uma vez importados, podemos usar o formControl de dentro do nosso modelo e defini-lo com o nome "termo".
<input type="text" [formControl]="term"/>
Em nosso componente, criamos uma instância de FormControlfrom@angular/form e a expomos como um campo sob o termo de nome em nosso componente.
Nos bastidores, o termo expõe automaticamente uma Observable<string>propriedade as valueChangesque podemos assinar. Agora que temos uma Observable<string>, superar a entrada do usuário é tão fácil quanto ligar debounceTime(400)para a nossa Observable. Isso retornará um novo Observable<string>que somente emitirá um novo valor quando não houver novos valores por 400ms.
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));
}
}
Seria um desperdício de recursos enviar outra solicitação de um termo de pesquisa para o qual nosso aplicativo já mostra os resultados. Tudo o que precisamos fazer para alcançar o comportamento desejado é ligar para o distinctUntilChangedoperador logo depois que ligamosdebounceTime(400)
Veja o exemplo de implementação observável no Plunker
Para lidar com respostas fora de ordem, consulte o artigo completo
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
Quanto ao uso do Http no Angular, concordo que nos casos de uso normais não há muita diferença ao usar o Observable over Promise. Nenhuma das vantagens é realmente relevante aqui na prática. Espero ver alguns casos de uso avançados no futuro :)
Saber mais
