Angular Academy · Урок

Операторы объединения

Объединяйте потоки с помощью combineLatest и forkJoin.

«Операторы объединения» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем объединять потоки

Реальные приложения координируют несколько асинхронных источников: несколько HTTP-вызовов, значение формы вместе с фильтром, щелчок вместе с последним состоянием. Операторы объединения сводят несколько наблюдаемых последовательностей к одной.

combineLatest

combineLatest выдаёт массив последних значений из каждого источника при каждой выдаче значения любым источником — после того как каждый источник выдаст хотя бы одно значение.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

Пример использования combineLatest

Отлично подходит для производного состояния интерфейса: объедините поисковый запрос и фильтр категории, чтобы сформировать запрос.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin ждёт, пока все источники завершатся, а затем выдаёт один массив их последних значений. Это эквивалент Promise.all в RxJS.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

Ограничение forkJoin

forkJoin ничего не выдаёт, если какой-либо источник никогда не завершается (например, интервал) или выдаёт ошибку до завершения. Используйте его для конечных источников, таких как HTTP-запросы.

merge

merge выравнивает несколько наблюдаемых последовательностей в одну, выдавая значения по мере их поступления из любого источника, без сопоставления пар.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip объединяет значения по индексам: выдаёт первое значение каждого источника, затем второе значение каждого источника и так далее. Он ждёт, пока все источники выдадут следующее значение.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith добавляет начальное значение в начало потока, благодаря чему combineLatest может начать выдачу до того, как сработают все источники.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom выдаёт значение только при выдаче значения источником, добавляя последние значения из других наблюдаемых последовательностей. Источник управляет выдачей, остальные последовательности пассивны.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat для последовательных потоков

concat подписывается на каждый источник по порядку и переходит к следующему только после завершения текущего. Используйте его, когда потоки должны выполняться строго один за другим.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest, forkJoin и zip

combineLatest: последнее значение каждого источника при любой выдаче.
forkJoin: последнее значение каждого источника после завершения всех.
zip: значения, объединённые по индексам.
Выбирайте оператор в зависимости от того, нужны ли Вам постоянные обновления, однократное объединение или строгое сопоставление.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете операторы объединения.

Повторение: операторы объединения

Операторы объединения координируют несколько потоков.

combineLatest: последнее значение каждого источника при любой выдаче.
forkJoin: объединение после завершения (аналог Promise.all).
merge: чередует все выдаваемые значения.
withLatestFrom: снимок остальных источников по сигналу основного источника.

Далее: операторы обработки ошибок.

Часто задаваемые вопросы

Урок «Операторы объединения» бесплатный?

Да — полный текст урока «Операторы объединения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Операторы объединения»?

Объединяйте потоки с помощью combineLatest и forkJoin. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Операторы объединения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy