0Pricing
Angular Academy · Урок

Наблюдаемые последовательности и подписки

Создавайте наблюдаемые потоки и подписывайтесь на них.

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

Что такое Observable

Observable — это ленивый поток значений, изменяющихся со временем. Ничего не происходит, пока Вы не вызовете subscribe. Поток может выдать ноль или больше значений, а затем завершиться или завершиться с ошибкой.

RxJS — это реактивная библиотека, с которой поставляется Angular, для работы с асинхронными задачами, такими как HTTP-запросы, события и таймеры.

Создание Observable

Конструктор Observable принимает функцию подписчика. Вызовите next(), чтобы выдать значение, complete() — чтобы завершить поток, а error() — чтобы сообщить об ошибке.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Подписка

Подписка запускает выполнение. Передайте наблюдатель с обработчиками next, error и complete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Observable выполняются лениво

Функция подписчика не выполняется, пока не будет вызван subscribe(). Каждая подписка запускает новое независимое выполнение (холодный observable).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Вспомогательные функции создания: of и from

Конструктор используется редко. Такие вспомогательные функции, как of и from, позволяют быстро создавать observable.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Создатели interval и timer

interval выдаёт последовательно увеличивающиеся числа по расписанию, а timer ждёт заданный интервал и затем выдаёт значение.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient возвращает Observable

В Angular методы HttpClient возвращают Observable. Запрос отправляется только после подписки.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Объект Subscription

subscribe() возвращает объект Subscription. Вызовите unsubscribe(), чтобы прекратить получение значений и освободить ресурсы.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Завершение и отписка

Когда observable вызывает complete() или error(), он автоматически освобождает ресурсы. Для бесконечных потоков (например, interval и событий DOM) необходимо отписаться самостоятельно.

Сокращённая форма наблюдателя

Если Вас интересуют только значения, передайте одну функцию — она станет обработчиком next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Горячие и холодные observable (кратко)

Холодные observable начинают выдавать значения после подписки, и каждый подписчик получает собственное выполнение (HTTP, of, interval). Горячие observable выдают значения независимо от наличия подписчиков и делятся ими между подписчиками (далее мы познакомимся с Subject).

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

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

Повторение: Observable и подписки

Observable — это ленивый поток, который запускается с помощью subscribe().

  • Выдавайте значения с помощью next, завершайте поток с помощью complete, сообщайте об ошибке с помощью error.
  • Методы HttpClient возвращают observable — они запускаются после подписки.
  • Отписывайтесь от бесконечных потоков, чтобы избежать утечек.

Далее: Subject и BehaviorSubject.

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

Урок «Наблюдаемые последовательности и подписки» бесплатный?

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

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

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

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

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

Сколько времени занимает урок «Наблюдаемые последовательности и подписки»?

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

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

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

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

  1. Наблюдаемые последовательности и подписки
  2. Субъекты и BehaviorSubject
  3. Отмена подписок и утечки памяти
  4. Асинхронный конвейер
← Назад к Angular Academy