І те, Promisesі інше Observablesнадає нам абстракції, які допомагають нам боротися з асинхронним характером наших додатків. Різницю між ними чітко вказали @ Günter та @Relu.
Оскільки фрагмент коду коштує тисячу слів, перегляньте наведений нижче приклад, щоб зрозуміти їх легше.
Дякуємо @Christoph Burgdorf за приголомшливу статтю
Angular використовує Rx.js Спостереження замість обіцянок для роботи з HTTP.
Припустимо, ви будуєте функцію пошуку, яка повинна миттєво показувати результати під час введення тексту. Звучить звично, але є багато проблем, які постають перед цим завданням.
- Ми не хочемо потрапляти на кінцеву точку сервера щоразу, коли користувач натискає клавішу, це повинно залити їх бурею
HTTPзапитів. В основному, ми хочемо вдарити його лише після того, як користувач перестане друкувати, а не кожен натискання клавіші.
- Не вдаряйте кінцеву точку пошуку тими ж парами запитів для наступних запитів.
- Попрацюйте з відповідями, що не були в порядку. Коли у нас є кілька запитів під час польоту одночасно, ми повинні враховувати випадки, коли вони повертаються в несподіваному порядку. Уявіть, ми спочатку набираємо комп’ютер , зупиняємося, запит виходить, ми набираємо машину , зупиняємося, запит виходить. Зараз у нас є два запити в польоті. На жаль, запит, який містить результати для комп'ютера, повертається після запиту, який містить результати для автомобіля .
Демонстрація буде просто складатися з двох файлів: app.tsі wikipedia-service.ts. У реальному світовому сценарії ми, швидше за все, розділимо речі далі.
Нижче наведено реалізацію на основі обіцянок , яка не обробляє жоден із описаних крайових випадків.
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 Вікіпедії із заданим пошуковим терміном. Зауважте, що ми зателефонували 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і виставляємо її функціональність за допомогою методу пошуку до шаблону. Шаблон просто пов'язується з клавіатурою та дзвінками search(term.value).
Ми розгортаємо результат Обіцянки про те, що метод пошуку WikipediaService повертається та викриваємо його як простий масив рядків до шаблону, щоб ми могли *ngForпропустити його і створити список для нас.
Дивіться приклад Promise на основі реалізації на Plunker
Де спостереження дійсно сяють
Давайте змінимо наш код, щоб не забивати кінцеву точку при кожному натисканні клавіші, а натомість надсилатимемо запит лише тоді, коли користувач перестав друкувати на 400 мс.
Щоб розкрити такі суперпотужності, спочатку нам потрібно отримати знак, Observable<string>який містить пошуковий термін, який вводить користувач. Замість того, щоб вручну прив’язуватися до події клавіатури, ми можемо скористатись 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 з нашого шаблону і встановити його під назвою "термін".
<input type="text" [formControl]="term"/>
У нашому компоненті ми створюємо екземпляр FormControlз @angular/formі виставляємо його як поле під терміном імені нашого компонента.
За лаштунками термін автоматично розкриває Observable<string>властивість як власність, на 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)
Дивіться приклад спостережуваної реалізації на Plunker
Для розгляду відповідей, що не відповідають порядку, перегляньте повну статтю
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
Наскільки я використовую Http в Angular, я погоджуюся, що у звичайних випадках використання немає великої різниці при використанні Observable over Promise. Жодна з переваг тут насправді не актуальна на практиці. Сподіваюся, я можу побачити певний випадок розширеного використання в майбутньому :)
Вивчайте більше
