Як зрозуміти операторів RxJS, з’їдаючи піцу: zip, forkJoin, & kombini Останнє пояснення з прикладами

Що таке RxJS?

Реактивне програмування - це асинхронна парадигма програмування, що стосується потоків даних та поширення змін - Wikipedia RxJS - це бібліотека для реактивного програмування з використанням спостережуваних, що полегшує складання асинхронного коду або коду на основі зворотного виклику -RxJS docs

Основними поняттями в RxJS є

  • Observable - це потік даних
  • Спостерігачі можуть зареєструвати до 3 зворотних дзвінків:
  1. наступний називається 1: M час підштовхувати нові значення до спостерігача
  2. помилка викликається не більше 1 разу, коли сталася помилка
  3. завершується викликається не більше 1 разу після завершення
  • Підписка "запускає" спостережуваний потік

Без підпискипотік не почне випромінювати значення. Це те, що ми називаємо спостережуваним застудою .

Йогоподібно до передплати на газету чи журнал ... ви не почнете їх отримувати, поки не підпишетесь. Потім він створює співвідношення 1: 1 між виробником (спостерігається) та споживачем (спостерігачем).

Що таке оператори RxJS?

Оператори - це чисті функції, що забезпечують функціональний стиль програмування роботи з колекціями з операціями. Існує два типи операторів:

  • Оператори створення
  • Трубопровідні оператори: перетворення, фільтрація, обмеження швидкості, згладжування

Суб'єкти - це особливий тип спостережуваного, який дозволяє багатозначним значенням бути багатоадресними . Хоча звичайні спостережувані одноадресні (кожен підписаний спостерігач володіє незалежним виконанням спостережуваного), суб'єкти багатоадресні. Це те, що ми називаємо гарячим спостережуваним.

У цій статті я зупинюся на zip, combineLatestі forkJoinоператорів. Це оператори комбінації RxJS, що означає, що вони дозволяють нам об'єднувати інформацію з декількох спостережуваних. Порядок, час та структура випущених цінностей є основними відмінностями між ними.

Давайте розглянемо кожного окремо.

zip ()

  • zip не починає випромінювати, поки кожен внутрішній спостережуваний не випромінює хоча б одне значення
  • zip випромінює, поки випромінені значення можуть бути зібрані з усіх внутрішніх спостережуваних
  • zip випромінює значення як масив

Уявімо, що ви з Маріо та Луїджі, двома своїми найкращими друзями, у найкращому італійському ресторані Риму. Кожен із вас замовляє напій, піцу та десерт. Ви вказуєте офіціантові спочатку принести напої, потім піцу і, нарешті, десерти.

Цю ситуацію можна представити 3 різними спостережуваними, що представляють 3 різні порядки. У цій конкретній ситуації офіціант може використовувати zipоператора для доставки (випуску) різних елементів замовлення за категоріями.

❗️❗️❗️Попередження❗️❗️❗️

Якщо ви повернетесь до того самого італійського ресторану зі своєю дівчиною, але вона не хоче їсти, ось що станеться:

Якщо waiter$використовує zipоператор, ви отримаєте лише свій напій!

Чому?

Тому що, коли waiter$випускаються напої, girlfriend$спостережуване закінчується, і більше з нього не можна стягнути цінності. Сподіваємось, ми waiter$можемо використати для нас іншого оператора, щоб ми не розлучалися з нашою дівчиною?

combLatest ()

  • combineLatest не починає випромінювати, поки кожен внутрішній спостережуваний не випромінює хоча б одне значення
  • Коли будь-яке внутрішнє спостережуване випромінює значення, видайте останнє випущене значення з кожного

У точно такому ж ресторані waiter$зараз розумні вирішили скористатися combineLatestоператором.

❗️❗️❗️Попередження❗️❗️❗️

При combineLatestцьому порядок наданих внутрішніх спостережуваних має значення.

Якщо you$вказано спочатку waiter$, воно видаватиме лише одне значення ["Tiramisu", "Sprite"].

Це відбувається тому, combineLatestщо не починає випромінювати, поки кожен внутрішній спостережуваний не випромінює хоча б одне значення. girlfriend$починає випромінювати, коли перший внутрішній спостережуваний випромінює своє останнє значення. Потім combineLatestвипромінює останні значення, зібрані з обох внутрішніх спостережуваних.

forkJoin ()

  • forkJoinвипромінює останнє випущене значення з кожної внутрішньої спостережуваної після того, як всі вони завершені
  • forkJoin ніколи не буде випромінювати, якщо одне із спостережуваних не завершиться

Коли ви заходите в ресторан і замовляєте піцу, ви не хочете знати всіх етапів, як готується піца. Якщо сир додається перед помідорами або навпаки. Ви просто хочете отримати свою піцу! Тут це forkJoinвступає в гру.

❗️❗️❗️Попередження❗️❗️❗️

  • Якщо одна з внутрішніх спостережуваних видає помилку, усі значення втрачаються
  • forkJoin не завершується
  • Якщо вас турбує лише те, коли всі внутрішні спостережувані завершаться успішно, ви можете виявити помилку зовні
  • Потім, forkJoinзавершує
  • Якщо вам байдуже, що внутрішні спостережувані завершуються успішно чи ні, ви повинні ловити помилки з кожного окремого внутрішнього спостережуваного
  • Потім, forkJoinзавершує

Особисто мені, коли я ходжу з друзями до ресторану, все одно, чи отримає хтось із них згорілу піцу. Я просто хочу своє? тому я попрошу waiter$виловлювати помилки з внутрішніх спостережуваних індивідуально.

Загорнути

Ми багато висвітлювали в цій статті! Хороші приклади важливі для кращого розуміння операторів RxJS та як їх розумно вибрати.

Для комбінованих операторів , таких як zip, combineLatestі forkJoinпорядку внутрішніх спостережуваних , які ви надаєте також має важливе значення, так як вона може змушую вас несподівану поведінку.

У RxJS є багато іншого для висвітлення, і я зроблю це в наступних статтях.

Сподіваюся, вам сподобалась ця стаття! ?

? Ви можете стежити за мною у Twitter, щоб отримувати сповіщення про нові повідомлення в блозі Angular / RxJS та цікаві поради!