АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚. На связи ΠžΠΌΠ΅Π»ΡŒΠ½ΠΈΡ†ΠΊΠΈΠΉ Π‘Π΅Ρ€Π³Π΅ΠΉ. НС Ρ‚Π°ΠΊ Π΄Π°Π²Π½ΠΎ я Π²Π΅Π» стрим ΠΏΠΎ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, Π³Π΄Π΅ рассказывал ΠΏΡ€ΠΎ Π°ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ Π² JavaScript. БСгодня я Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π» Π·Π°ΠΊΠΎΠ½ΡΠΏΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Но ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ основной ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π²ΠΎΠ΄Π½ΡƒΡŽ. Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ стСк ΠΈ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ?

Π‘Ρ‚Π΅ΠΊ β€” это коллСкция, элСмСнты ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ «послСдний вошСл, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅Π»Β» LIFO

ΠžΡ‡Π΅Ρ€Π΅Π΄ΡŒ β€” это коллСкция, элСмСнты ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ (Β«ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ вошСл, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅Π»Β» FIFO

ОкСй, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

JavaScript β€” это ΠΎΠ΄Π½ΠΎΠΏΠΎΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ язык программирования. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ имССтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡ‚ΠΎΠΊ выполнСния ΠΈ ΠΎΠ΄ΠΈΠ½ стСк, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π² ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ этом Π±ΡƒΠ΄ΡƒΡ‚ ΠΆΠ΄Π°Ρ‚ΡŒ своСй ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Π² стСкС, ΠΏΠΎΠΊΠ° ΠΈΡ… Π½Π΅ Π²Ρ‹Π·ΠΎΠ²ΡƒΡ‚.

Π‘Ρ‚Π΅ΠΊ Π²Ρ‹Π·ΠΎΠ²ΠΎΠ² β€” это структура Π΄Π°Π½Π½Ρ‹Ρ…, которая, ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎ говоря, записываСт свСдСния ΠΎ мСстС Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, Π³Π΄Π΅ ΠΌΡ‹ находимся. Если ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΌΡ‹ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ запись ΠΎ Π½Π΅ΠΉ Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ стСка. Когда ΠΌΡ‹ ΠΈΠ· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ возвращаСмся, ΠΌΡ‹ вытаскиваСм ΠΈΠ· стСка самый Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ элСмСнт ΠΈ оказываСмся Ρ‚Π°ΠΌ, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π²Ρ‹Π·Ρ‹Π²Π°Π»ΠΈ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ. Π­Ρ‚ΠΎ β€” всё, Ρ‡Ρ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ стСк. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€Π°ΠΉΠ½Π΅ интСрСсный вопрос. Как Ρ‚ΠΎΠ³Π΄Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π°ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ Π² JavasScript?

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

На самом Π΄Π΅Π»Π΅ ΠΏΠΎΠΌΠΈΠΌΠΎ стСка Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… присутствуСт особая ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΌ WebAPI. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈΠ· этой ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ выполнятся ΠΏΠΎ порядку Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ стСк Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‡ΠΈΡ‰Π΅Π½. Волько послС этого ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΈΠ· ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Π² стСк Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Если Π² стСкС Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ находится хотя Π±Ρ‹ ΠΎΠ΄ΠΈΠ½ элСмСнт, Ρ‚ΠΎ ΠΎΠ½ΠΈ Π² стСк ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚. Как Ρ€Π°Π· ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·-Π·Π° этого Π²Ρ‹Π·ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΏΠΎ Ρ‚Π°ΠΉΠΌΠ°ΡƒΡ‚Π° часто Π±Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ функция Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΈΠ· ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Π² стСк, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½.

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈ займёмся Π΅Π³ΠΎ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΌ Β«Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌΒ». Π’Π°ΠΊΠΆΠ΅ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ этом происходит Π² систСмС.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

1) Пока Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ происходит. Консоль Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° чиста, стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ² пуст.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

2) ΠŸΠΎΡ‚ΠΎΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Π°Β console.log(‘Hi’) добавляСтся Π² стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

3) И ΠΎΠ½Π° выполняСтся

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

4) Π—Π°Ρ‚Π΅ΠΌ console.log(‘Hi’) удаляСтся ΠΈΠ· стСка Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

5) Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ ΠΊΠΎΠΌΠ°Π½Π΄Π΅Β setTimeout(function cb1() {… }). ΠžΠ½Π°Β Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ‚ΡΡ Π² стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

6) Команда setTimeout(function cb1() {… }) выполняСтся. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ создаёт Ρ‚Π°ΠΉΠΌΠ΅Ρ€, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠΉΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ Web API. Он Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ отсчёт Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

7) Команда setTimeout(function cb1() {… })Β Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈ удаляСтся ΠΈΠ· стСка Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

8) Команда console.log(‘Bye’) добавляСтся Π² стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

9) Команда console.log(‘Bye’) выполняСтся.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

10) Команда console.log(‘Bye’) удаляСтся ΠΈΠ· стСка Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

11) ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΉΠ΄ΡƒΡ‚, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, 5000 мс., Ρ‚Π°ΠΉΠΌΠ΅Ρ€ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ коллбэк cb1Β Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ коллбэков.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

12) Π¦ΠΈΠΊΠ» событий Π±Π΅Ρ€Ρ‘Ρ‚ c Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽΒ cb1Β ΠΈΠ· ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ коллбэков ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π΅Ρ‘ Π² стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

13) Ѐункция cb1 выполняСтся ΠΈ добавляСт console.log(‘cb1’)Β Π² стСк Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

14) Команда console.log(‘cb1’) выполняСтся.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

15) Команда console.log(‘cb1’) удаляСтся ΠΈΠ· стСка Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

16) Ѐункция cb1 удаляСтся ΠΈΠ· стСка Π²Ρ‹Π·ΠΎΠ²ΠΎΠ².

ВзглянСм Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠ΅:

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Ну Π²ΠΎΡ‚ ΠΌΡ‹ ΠΈ рассмотрСли ΠΊΠ°ΠΊ Π² JavaScript Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π°ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± ΡΠ²ΠΎΠ»ΡŽΡ†ΠΈΠΈ асинхронного ΠΊΠΎΠ΄Π°.

Π­Π²ΠΎΠ»ΡŽΡ†ΠΈΡ асинхронного ΠΊΠΎΠ΄Π°.

a(function (resultsFromA) {
    b(resultsFromA, function (resultsFromB) {
        c(resultsFromB, function (resultsFromC) {
            d(resultsFromC, function (resultsFromD) {
                e(resultsFromD, function (resultsFromE) {
                    f(resultsFromE, function (resultsFromF) {
                        console.log(resultsFromF);
                    })
                })
            })
        })
    })
});

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊΠΈΠΌ ΠΌΡ‹ Π΅Π³ΠΎ Π·Π½Π°Π΅ΠΌ Π² JavaScript, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ функциями. Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ ΠΊΠ°ΠΊ любая другая пСрСмСнная Π΄Ρ€ΡƒΠ³ΠΈΠΌ функциям. Π’Π°ΠΊ Ρ€ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ коллбэки. И это ΠΏΡ€ΠΈΠΊΠΎΠ»ΡŒΠ½ΠΎ, вСсСло ΠΈ Π·Π°Π΄ΠΎΡ€Π½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ прСвращаСтся Π² Π³Ρ€ΡƒΡΡ‚ΡŒ, тоску ΠΈ ΠΏΠ΅Ρ‡Π°Π»ΡŒ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ? Π”Π° всС просто:

  • Π‘ ростом слоТности ΠΊΠΎΠ΄Π°, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ быстро прСвращаСтся Π² малопонятныС ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ β€” Β«callback hellΒ».
  • ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ошибок ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡƒΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.
  • НСльзя Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ выраТСния с return.

Π‘ появлСниСм Promise обстановка стала Ρ‡ΡƒΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅.

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('FAILED HERE');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('error: ', e);
});

  • Появились Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ промисов, Ρ‡Ρ‚ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΠ»ΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°
  • Появился ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Π° ошибок
  • Появилась Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ выполнСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Promise.all
  • Π’Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ Π°ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ async/await

Но Ρƒ промиса Π΅ΡΡ‚ΡŒ свои ограничСния. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ промис, Π±Π΅Π· Ρ‚Π°Π½Ρ†Π΅Π² с Π±ΡƒΠ±Π½ΠΎΠΌ, нСльзя ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Π° Ρ‡Ρ‚ΠΎ самоС Π³Π»Π°Π²Π½ΠΎΠ΅ β€” Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

Ну Π²ΠΎΡ‚ ΠΌΡ‹ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ подошли ΠΊ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ. Устали? Ну Π±Π»Π°Π³ΠΎ Π΄Π΅Π»ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΉΡ‚ΠΈ Π·Π°Π²Π°Ρ€ΠΈΡ‚ΡŒ Ρ‡Π°Π΅ΠΊ, ΠΎΠ±ΠΌΠΎΠ·Π³ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Π°Π»Π΅Π΅. А я ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΡƒ.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅β€Šβ€”β€ŠΠΏΠ°Ρ€Π°Π΄ΠΈΠ³ΠΌΠ° программирования, ориСнтированная Π½Π° ΠΏΠΎΡ‚ΠΎΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ распространСниС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ….

// ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ссылку Π½Π° элСмСнт
const input = ducument.querySelector('input');

const eventsArray = [];

// ΠŸΡƒΡˆΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ событиС Π² массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°. ΠœΡ‹ создаСм массив, ΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ keyup события input ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ событиС Π² нашСм массивС. ΠŸΡ€ΠΈ этом Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ наш массив отсортирован ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈβ€Š Ρ‚.Π΅. β€ŠΠΈΠ½Π΄Π΅ΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½ΠΈΡ… событий большС, Ρ‡Π΅ΠΌ индСкс Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ…. Π’Π°ΠΊΠΎΠΉ массив прСдставляСт собой ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΡƒΡŽ модСль ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…, Π½ΠΎ это Π΅Ρ‰Π΅ Π½Π΅ ΠΏΠΎΡ‚ΠΎΠΊ. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ± этот массив ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ смСло Π½Π°Π·Π²Π°Ρ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠΎΠΎΠ±Ρ‰Π°Ρ‚ΡŒ подписчикам, Ρ‡Ρ‚ΠΎ Π² Π½Π΅Π³ΠΎ поступили Π½ΠΎΠ²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ подошли ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ ΠΏΠΎΡ‚ΠΎΠΊΠ°.

ΠŸΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ…

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

ΠŸΠΎΡ‚ΠΎΠΊβ€Šβ€”β€ŠΡΡ‚ΠΎ массив Π΄Π°Π½Π½Ρ‹Ρ…, отсортированных ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠΎΠ±Ρ‰Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹Π΅ измСнились. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°ΠΊ ΡƒΠ΄ΠΎΠ±Π½ΠΎ становится ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½Π° ΠΎΠ΄Π½ΠΎ дСйствиС потрСбуСтся Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ нСсколько событий Π² Ρ€Π°Π·Π½Ρ‹Ρ… участках ΠΊΠΎΠ΄Π°. ΠœΡ‹ просто Π΄Π΅Π»Π°Π΅ΠΌ подписку Π½Π° ΠΏΠΎΡ‚ΠΎΠΊ ΠΈ ΠΎΠ½ Π½Π°ΠΌ сам сообщит ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄ΡƒΡ‚ измСнСния. И это ΡƒΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° RxJs.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

RxJS β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с асинхронными ΠΈ основанными Π½Π° событиях ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ с использованиСм Π½Π°Π±Π»ΡŽΠ΄Π°Π΅ΠΌΡ‹Ρ… ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚Π΅ΠΉ. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт основной Ρ‚ΠΈΠΏ Observable, нСсколько Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² (Observer, Schedulers, Subjects) ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с событиями ΠΊΠ°ΠΊ с коллСкциями (map, filter, reduce, every ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΈΠ· JavaScript Array).

Π”Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся с основными понятиями этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

Observable, Observer, Producer

Observable β€” ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ‚ΠΈΠΏ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ рассмотрим. Π­Ρ‚ΠΎΡ‚ класс содСрТит Π² сСбС ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ RxJs. Он связан с Π½Π°Π±Π»ΡŽΠ΄Π°Π΅ΠΌΡ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° subscribe.

Π’ Observable рСализуСтся Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ для создания ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ Observer. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΎΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для Observer называСтся Producer. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ массив, ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΠΎΡ€, web socket, ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ событиС ΠΈ Ρ‚.ΠΏ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ observable являСтся ΠΏΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ Producer ΠΈ Observer.

Observable ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° событий Observer:

  • next – Π½ΠΎΠ²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅
  • error – ΠΎΡˆΠΈΠ±ΠΊΡƒ, Ссли ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»Π°ΡΡŒ ΠΏΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ситуации. это событиС Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.
  • complete β€” сигнал ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½ΠΎΠ²Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… большС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π΄Π΅ΠΌΠΎ:

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Π’ Π½Π°Ρ‡Π°Π»Π΅ ΠΌΡ‹ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ значСния 1, 2, 3, Π° спустя 1 сСк. ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ 4 ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠΈΠΌ наш ΠΏΠΎΡ‚ΠΎΠΊ.

ΠœΡ‹ΡΠ»ΠΈ Π² слух

И Ρ‚ΡƒΡ‚ я понял, Ρ‡Ρ‚ΠΎ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π±Ρ‹Π»ΠΎ интСрСснСй Ρ‡Π΅ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΠ± этом. πŸ˜€

Subscription

Когда ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ подписку Π½Π° ΠΏΠΎΡ‚ΠΎΠΊ, ΠΌΡ‹ создаСм Π½ΠΎΠ²Ρ‹ΠΉ класс subscription, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ подписку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° unsubscribe. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ подписки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° add. Ну ΠΈ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ remove. ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ add ΠΈ remove Π½Π° Π²Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΡƒΡŽ подписку. Π₯ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ отписку, Ρ‚ΠΎ ΠΌΡ‹ отписываСмся ΠΎΡ‚ всСх Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… подписок ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ Π±Ρ‹ ΠΈ Ρƒ Π½ΠΈΡ… Π²Ρ‹Π·Ρ‹Π²Π°Π»ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ unsubscribe. ИдСм дальшС.

Π’ΠΈΠ΄Ρ‹ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ²

HOT
COLD

Producer создаСтся снаруТи observable
Producer создаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ observable

Π”Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ создания observable
Π”Π°Π½Π½Ρ‹Π΅ ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ подписки

НуТна Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π»ΠΎΠ³ΠΈΠΊΠ° для отписки
ΠŸΠΎΡ‚ΠΎΠΊ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ связь ΠΎΠ΄ΠΈΠ½-ΠΊ-ΠΌΠ½ΠΎΠ³ΠΈΠΌ
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ связь Π²ΠΈΠ΄Π° ΠΎΠ΄ΠΈΠ½-ΠΊ-ΠΎΠ΄Π½ΠΎΠΌΡƒ

ВсС подписки ΠΈΠΌΠ΅ΡŽΡ‚ Π΅Π΄ΠΈΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
Подписки нСзависимы

Π”Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ, Ссли Π½Π΅Ρ‚ подписки
ΠŸΠ΅Ρ€Π΅ΠΈΠ·Π΄Π°Π΅Ρ‚ всС значСния ΠΏΠΎΡ‚ΠΎΠΊΠ° для Π½ΠΎΠ²ΠΎΠΉ подписки

Если ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ аналогию, Ρ‚ΠΎ я Π±Ρ‹ прСдставил горячий ΠΏΠΎΡ‚ΠΎΠΊ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΠΌ Π² ΠΊΠΈΠ½ΠΎΡ‚Π΅Π°Ρ‚Ρ€Π΅. Π’ ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ‚Ρ‹ ΠΏΡ€ΠΈΡˆΠ΅Π», с Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΈ Π½Π°Ρ‡Π°Π» просмотр. Π₯ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ я Π±Ρ‹ сравнил со Π·Π²ΠΎΠ½ΠΊΠΎΠΌ Π² Ρ‚Π΅Ρ…. ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ. Π›ΡŽΠ±ΠΎΠΉ позвонивший ΡΠ»ΡƒΡˆΠ°Π΅Ρ‚ запись Π°Π²Ρ‚ΠΎΠΎΡ‚Π²Π΅Ρ‚Ρ‡ΠΈΠΊΠ° ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°, Π½ΠΎ Ρ‚Ρ‹ моТСшь Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ Ρ‚Ρ€ΡƒΠ±ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ unsubscribe.

Π₯ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π΅Ρ‰Π΅ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ warm ΠΏΠΎΡ‚ΠΎΠΊΠΈ ( Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ я встрСчал ΠΊΡ€Π°ΠΉΠ½Π΅ Ρ€Π΅Π΄ΠΊΠΎ ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½Ρ‹Ρ… сообщСствах ) β€” это ΠΏΠΎΡ‚ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ трансформируСтся ΠΈΠ· Ρ…ΠΎΠ»ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π² горячий. Π’ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос β€” Π³Π΄Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ)) ΠŸΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ· ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ.

Π― Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ с ангуляром. Он Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ rxjs. Для получСния Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° сСрвСр я оТидаю Ρ…ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ ΠΈ этот ΠΏΠΎΡ‚ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π² шаблонС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ asyncPipe. Если я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ этот ΠΏΠ°ΠΉΠΏ нСсколько Ρ€Π°Π·, Ρ‚ΠΎ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡΡΡŒ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ Ρ…ΠΎΠ»ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ pipe Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с сСрвСра, Ρ‡Ρ‚ΠΎ мягко говоря странно. А Ссли я ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽ Ρ…ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ Π² Ρ‚Π΅ΠΏΠ»Ρ‹ΠΉ, Ρ‚ΠΎ запрос ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Π΅Π΄ΠΈΠ½ΠΎΠΆΠ΄Ρ‹.

Π’ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π° ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² достаточно слоТна для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, Π½ΠΎ Π²Π°ΠΆΠ½Π°.

Operators

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

Π Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΠΎΡ‚ΠΎΠΊΠ°ΠΌΠΈ Π½Π°ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹. Они ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ события, ΠΏΡ€ΠΎΡ‚Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Π² Observable. ΠœΡ‹ рассмотрим ΠΏΠ°Ρ€ΠΎΡ‡ΠΊΡƒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярных, Π° ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ с ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΏΠΎ ссылкам Π² ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Operators β€” of

НачнСм со Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π° of. Он создаСт ObservableΒ Π½Π° основС простого значСния.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” filter

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ filter, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΠΎ названию, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΡƒΠ΅Ρ‚ сигнал ΠΏΠΎΡ‚ΠΎΠΊΠ°. Если ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ истину, Ρ‚ΠΎ пропускаСт Π΄Π°Π»Π΅Π΅.

Operators β€” take

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

take β€” ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»-Π²Π° эмитов, послС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ ΠΏΠΎΡ‚ΠΎΠΊ.

Operators β€” debounceTime

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

debounceTime β€” отбрасываСт испускаСмыС значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ Π² ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ β€” ΠΏΠΎ ΠΏΡ€ΠΎΡˆΠ΅ΡΡ‚Π²ΠΈΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π° эмитит послСднСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1500мс
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // ОТидаСм 700мс значСния ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ
  take(3)
);  

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” takeWhile

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Π­ΠΌΠΈΡ‚ΠΈΡ‚ значСния, ΠΏΠΎΠΊΠ° takeWhile Π½Π΅ Π²Π΅Ρ€Π½Π΅Ρ‚ false, послС Ρ‡Π΅Π³ΠΎ ΠΎΡ‚ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ ΠΎΡ‚ ΠΏΠΎΡ‚ΠΎΠΊΠ°.

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile( producer =>  producer < 5 )
);  

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” combineLatest

ΠšΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ combineLatest Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° promise.all. Он ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ нСсколько ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½. ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ сдСлаСт хотя Π±Ρ‹ ΠΎΠ΄ΠΈΠ½ эмит, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ послСдниС значСния ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π² Π²ΠΈΠ΄Π΅ массива. Π”Π°Π»Π΅Π΅, послС любого эмита ΠΈΠ· ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Ρ‘Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ значСния.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 750мс
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” zip

Zip β€” ΠΆΠ΄Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ массив Π½Π° основС этих Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡ€ΠΈΠ΄Π΅Ρ‚ ΠΈΠ· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, Ρ‚ΠΎ Π³Ρ€ΡƒΠΏΠΏΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ сформирована.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” forkJoin

forkJoinΒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ ΠΏΠΎΡ‚ΠΎΠΊΠΈ, Π½ΠΎ ΠΎΠ½ Π΅ΠΌΠΈΡ‚Π½ΠΈΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° всС ΠΏΠΎΡ‚ΠΎΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚Β Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Ρ‹ (complete).

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators β€” map

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ трансформации map ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эмита Π² Π½ΠΎΠ²ΠΎΠ΅.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

const {  Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Π˜ΡΠΏΡƒΡΠΊΠ°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π· Π² 1000мс
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Operators – share, tap

ΠžΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ tapΒ — позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ side эффСкты, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π£Ρ‚ΠΈΠ»ΠΈΡ‚Π½Ρ‹ΠΉ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ share способСн ΠΈΠ· Ρ…ΠΎΠ»ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ горячим.

АсинхронноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² JavaScript (Callback, Promise, RxJs )

Π‘ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Subject.

ΠœΡ‹ΡΠ»ΠΈ Π² слух

И Ρ‚ΡƒΡ‚ я пошСл Ρ‡Π°Π΅ΠΊ ΠΏΠΈΡ‚ΡŒ. Π£Ρ‚ΠΎΠΌΠΈΠ»ΠΈ мСня эти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ πŸ˜€

БСмСйство subject-ΠΎΠ²

БСмСйство subject-ΠΎΠ² ΡΠ²Π»ΡΡŽΡ‚ΡΡ ярким ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ горячих ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ². Π­Ρ‚ΠΈ классы ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΊΠΈΠΌ Π³ΠΈΠ±Ρ€ΠΈΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π² Ρ€ΠΎΠ»ΠΈ observable ΠΈ observer. Π’Π°ΠΊ ΠΊΠ°ΠΊ subject являСтся горячим ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ, Ρ‚ΠΎ ΠΎΡ‚ Π½Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΠΎ основным ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ, Ρ‚ΠΎ это:

  • next – ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Π½ΠΎΠ²Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… Π² ΠΏΠΎΡ‚ΠΎΠΊ
  • error – ошибка ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠ°
  • complete – Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠ°
  • subscribe – ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΡ‚ΠΎΠΊ
  • unsubscribe – ΠΎΡ‚ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΏΠΎΡ‚ΠΎΠΊΠ°
  • asObservable – трансформируСм Π² Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚Π΅Π»Ρ
  • toPromise – трансформируСт Π² промис

Π’Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ 4 5 Ρ‚ΠΈΠΏΠΎΠ² subject-ΠΎΠ².

ΠœΡ‹ΡΠ»ΠΈ Π² слух

На стримС Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» 4, Π° оказалось ΠΎΠ½ΠΈ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ. Как говорится Π²Π΅ΠΊ ΠΆΠΈΠ²ΠΈ Π²Π΅ΠΊ ΡƒΡ‡ΠΈΡΡŒ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Subject new Subject()– самый простой Π²ΠΈΠ΄ subject-ΠΎΠ². БоздаСтся Π±Π΅Π· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ². ΠŸΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ значСния ΠΏΡ€ΠΈΡˆΠ΅Π΄ΡˆΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС подписки.

BehaviorSubject new BehaviorSubject( defaultData<T> ) – Π½Π° ΠΌΠΎΠΉ взгляд самый распространённый Π²ΠΈΠ΄ subject-ΠΎΠ². На Π²Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ВсСгда сохраняСт Π΄Π°Π½Π½Ρ‹Π΅ послСднСго эмита, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ ΠΏΡ€ΠΈ подпискС. Π”Π°Π½Π½Ρ‹ΠΉ класс ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ value, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠ°.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) β€” На Π²Ρ…ΠΎΠ΄ ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΡ„Π΅Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π² сСбС Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, Π° Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ врСмя Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ измСнСния.

AsyncSubject new AsyncSubject() β€” ΠΏΡ€ΠΈ подпискС Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ происходит, ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈΒ complete. Π‘ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послСднСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠ°.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) β€” О Π½Π΅ΠΌ докумСнтация ΠΌΠΎΠ»Ρ‡ΠΈΡ‚ ΠΈ я сам Π΅Π³ΠΎ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π· Π²ΠΈΠΆΡƒ. ΠšΡ‚ΠΎ Π·Π½Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΠΈΡˆΠΈΡ‚Π΅, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠΌ.

Π€ΡƒΡ„. Ну Π²ΠΎΡ‚ ΠΌΡ‹ ΠΈ рассмотрСли всС, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‚Π΅Π» сСгодня Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ. НадСюсь данная информация Π±Ρ‹Π»Π° ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ. Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ со списком Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ полСзная информация.

ПолСзная информация

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: habr.com