Что такое Observable в Angular

Question

Что такое Observable в Angular

Тип вопроса: Angular Вероятность: 10% Категория: Frontend Разработчик

Ответ

Observable — это объект из библиотеки RxJS, представляющий поток данных, который может асинхронно передавать ноль или более значений. В Angular он часто используется для работы с HTTP-запросами, событиями и другими асинхронными операциями.

Ключевые особенности:

Ленивая загрузка (выполняется только при вызове subscribe())
Может передавать несколько значений
Поддерживает операторы (map, filter и т.д.)
Позволяет отменять подписку (unsubscribe())

import { Observable } from 'rxjs';

// Создание простого Observable
const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

// Подписка
observable.subscribe({
  next: value => console.log(value),
  complete: () => console.log('Done')
});

В Angular часто используется с HttpClient:

this.http.get('/api/data').subscribe(data => {
  this.data = data;
});

Ответ 18+ 🔞

А, Observable, говоришь? Ну это, блядь, такая штука из RxJS, представляешь? Как будто водопроводная труба, по которой могут течь данные — ноль, один, овердохуища значений, и всё это асинхронно, не мешая основному потоку. В Angular на нём, сука, пол-фреймворка стоит: HTTP-запросы, события, всякая асинхронная хуйня.

Что в нём такого особенного, спросишь?

Ленивый, как кот сука собака. Не начнёт работать, пока на него не подпишутся. То есть пока не вызовут subscribe() — нихуя не происходит, сидит и курит.
Может настрелять кучу значений. Не как Promise, который один раз и в дамки. Этот может постить данные, пока не надоест.
Любит операторы. К нему можно прикрутить map, filter и прочую хуйню, чтобы данные как надо трансформировать, прямо на лету.
Отписку поддерживает. Надоело — вызвал unsubscribe(), и всё, поток перекрыл. Красота, а не жизнь.

import { Observable } from 'rxjs';

// Создаём этого самого Observable, представляешь?
const observable = new Observable(subscriber => {
  subscriber.next('Привет'); // Пульнул первое значение
  subscriber.next('Мир'); // Пульнул второе
  subscriber.complete(); // Всё, кончил, приехали.
});

// А теперь подписываемся, чтобы это всё увидеть
observable.subscribe({
  next: value => console.log(value), // Ловим каждое "пуль"
  complete: () => console.log('Всё, пиписьки кончились') // Ловим конец
});

А в Angular, например, с HttpClient это выглядит так просто, что даже подозрение ебать чувствую:

this.http.get('/api/data').subscribe(data => {
  this.data = data; // Получил данные и втихоря их присвоил
});

Вот и вся магия, ёпта. Не поток, а мечта.