И то, Promisesи другое Observablesпредоставляет нам абстракции, которые помогают нам справляться с асинхронной природой наших приложений. Разница между ними была четко указана @ Günter и @Relu.
Поскольку фрагмент кода стоит тысячи слов, давайте разберем приведенный ниже пример, чтобы его было проще понять.
Спасибо @Christoph Burgdorf за отличную статью
Angular использует Rx.js Observables вместо обещаний иметь дело с HTTP.
Предположим, что вы создаете функцию поиска, которая должна мгновенно отображать результаты при вводе. Звучит знакомо, но есть много проблем, которые идут с этой задачей.
- Мы не хотим попадать на конечную точку сервера каждый раз, когда пользователь нажимает клавишу, он должен заполнять их потоком
HTTPзапросов. По сути, мы хотим нажать на него только после того, как пользователь перестал печатать вместо каждого нажатия клавиши.
- Не нажимайте конечную точку поиска с теми же параметрами запроса для последующих запросов.
- Разберитесь с неупорядоченными ответами. Когда у нас есть несколько запросов одновременно, мы должны учитывать случаи, когда они возвращаются в неожиданном порядке. Представьте, что мы сначала печатаем компьютер , останавливаемся, запрос отправляется, мы набираем машину , останавливаем запрос отправляем. Теперь у нас есть два запроса в полете. К сожалению, запрос, содержащий результаты для компьютера, возвращается после запроса, который содержит результаты для автомобиля .
Демо будет просто состоять из двух файлов: app.tsи wikipedia-service.ts. В сценарии реального мира мы, скорее всего, разделим вещи дальше.
Ниже приведена реализация на основе Promise , которая не обрабатывает ни один из описанных крайних случаев.
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]);
}
}
Мы внедряем Jsonpсервис для GETзапроса API-интерфейса Wikipedia с заданным поисковым термином. Обратите внимание, что мы звоним toPromise, чтобы получить от а Observable<Response>до Promise<Response>. В конце концов, в Promise<Array<string>>качестве возвращаемого типа нашего метода поиска получим.
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);
}
}
Здесь тоже нет ничего удивительного. Мы внедряем наш WikipediaServiceи выставляем его функциональность через шаблон поиска в шаблон. Шаблон просто привязывается к keyup и звонкам search(term.value).
Мы разворачиваем результат Обещания, который возвращает метод поиска в WikipediaService, и выставляем его в виде простого массива строк в шаблоне, чтобы можно было *ngForвыполнить цикл по нему и создать для нас список.
Посмотрите пример реализации на основе Promise на Plunker
Где наблюдаемые действительно сияют
Давайте изменим наш код, чтобы не забивать конечную точку при каждом нажатии клавиши, а вместо этого отправлять запрос только тогда, когда пользователь перестал печатать в течение 400 мс
Чтобы раскрыть такие сверхспособности, нам сначала нужно получить выражение Observable<string>, содержащее поисковый термин, который вводит пользователь. Вместо ручной привязки к событию keyup мы можем воспользоваться formControlдирективой Angular . Чтобы использовать эту директиву, нам сначала нужно импортировать ReactiveFormsModuleв наш модуль приложения.
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 {}
После импорта мы можем использовать formControl из нашего шаблона и установить для него имя «term».
<input type="text" [formControl]="term"/>
В нашем компоненте мы создаем экземпляр FormControlfrom @angular/formи выставляем его как поле под именем term в нашем компоненте.
За кулисами термин автоматически предоставляет Observable<string>свойство as, на valueChangesкоторое мы можем подписаться. Теперь, когда у нас есть Observable<string>, преодоление пользовательского ввода так же просто, как вызов debounceTime(400)нашего Observable. Это вернет новое значение, Observable<string>которое будет выдавать новое значение только в том случае, если новые значения не поступали в течение 400 мс.
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));
}
}
Было бы напрасной тратой ресурсов на отправку еще одного запроса по поисковому запросу, для которого наше приложение уже показывает результаты. Все, что нам нужно сделать для достижения желаемого поведения, это вызвать distinctUntilChangedоператора сразу после того, как мыdebounceTime(400)
Смотрите пример реализации Observable на Plunker
Чтобы разобраться с неупорядоченными ответами, ознакомьтесь с полной статьей
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html.
Поскольку я использую Http в Angular, я согласен, что в обычных случаях использования нет большой разницы при использовании Observable over Promise. Ни одно из преимуществ на самом деле не актуально здесь на практике. Надеюсь, что я смогу увидеть какой-нибудь продвинутый вариант использования в будущем :)
Учить больше
