Наблюдаемый от rxjs

Question

По этой теме: В чем разница между обещаниями и наблюдаемыми?

Многие пользователи говорили, что Observable - это поток. Мне действительно трудно понять, как конкретная конечная точка, например, эта:

https://jsonplaceholder.typicode.com/posts

может вернуть много значений с течением времени. Поскольку это запрос http, возвращается один resposne независимо от того, был он успешным или неудачным.

Answer 1

Вы правы, запрос http все равно будет возвращать только одно событие при использовании его с наблюдаемыми. Поэтому, если единственная асинхронная операция, которую вы выполняете, - это один http-запрос, использование наблюдаемой над обещанием выгоды не дает.

Мощь RxJS и наблюдаемых появляется, когда вы начинаете объединять несколько наблюдаемых потоков вместе. Это можно сделать с помощью таких операторов, как mergeMap, switchMap, forkJoin, ►

Возьмем, к примеру, опрос: создание потока событий, который запускается каждые 10 секунд, а затем опрашивает сервер с запросом http - это тот случай, когда выполнение запросов http с наблюдаемыми значениями действительно блестяще.

Answer 2

Сравнение http-запроса по обещанию и наблюдаемому не сильно отличается, поскольку наблюдаемое завершается после выполнения запроса, поэтому оно не является долговременным наблюдаемым.Но тот, что ниже, выдает каждый раз, когда вы нажимаете кнопку.

const { fromEvent } = rxjs;

fromEvent(document.getElementById('clickMe'), 'click').subscribe(() => { 
  console.log('clicked button');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>
<button id="clickMe">Click me</button>

Answer 3

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

Предположим, у нас есть метод, который вернет обещание для этого JSON:

const dataPromise = fetchData('https://jsonplaceholder.typicode.com/posts');

Кроме того, представьте, что мы отслеживаем присутствие пользователей на текущей странице:

const userLeavePromise = trackUserPresence();

Теперь давайте нарисуем временные шкалы для извлечения данных и событий, связанных с уходом пользователя. Здесь o обозначает событие, происходящее во времени:

            1s  2s  3s  4s  5s
data        ------------o
userLeave   --------o

Например, ради, данные будут выбираться на 4-й секунде, а наш беспокойный пользователь покинет страницу на 3-й. В этом случае мы хотим отменить операцию выборки и все обратные вызовы пост-обработки (в терминах Promise все .then -настроенные функции).

Для таких (и многих других) ситуаций RxJS предоставляет множество операторов, которые позволяют нам комбинировать события с течением времени.

В данном конкретном случае мы бы взяли данные, Пока пользователь не покинул страницу:

// Observable for data
const data$ = fetchData('https://jsonplaceholder.typicode.com/posts');

// Observable for user leave
const userLeave$ = trackUserPresence();

data$
  .takeUntil(userLeave$)
  .subscribe(data => console.log(data))