αα½ααααΈβα’αααβααΆααα’ααααααΆα Sergey Omelnitsky αααα»αβααΆααααα αα·αααΌαααα»ααααΆαααααααα ααα αααα»αααΆααααα αααΆαααααΆαααΎααΆαααααααααααα·ααΈαααααΆαααααα·αααα ααΆααααααααααααα»αααΆααα·ααΆαα’αααΈα’ααααΆααα αααα»α JavaScript α ααααααααααα»αα αααααα αααΆαααΎαααααΆαααααα
ααα»αααααα»ααααααΎαα
αΆααααααΎααααααΆααααααΆαα ααΎαααααΌαααααΎαααααα
αααΆαα ααΌα
ααααααΌαα
αΆααααααΎαααΆαα½ααα·αααααα ααΎααααα·ααα½αααΊααΆα’αααΈ?
ααα ααΊααΆααΆααααααΌααααα»ααααααΆαα»αααααα½αααααααΌαααΆαααα½ααα
ααΎααΌαααααΆα LIFO α
α»ααααααα
αΌαααααΌα
αα½α ααΊααΆααΆααααααΌααααα»ααααααΆαα»αααααα½αααααααΌαααΆαααα½ααα
ααΎααΌαααααΆα FIFO ααααΌαα
αΌαααααΌα
αα·αα’αΈαα αααααααα
JavaScript ααΊααΆααΆααΆααααααααααα·ααΈαααααΆααααααααα½αα αααααΆααααααΆ ααΆαααααΆαααααα·ααααα·αα½αααααααα»ααααα αα·αααααα½ααα ααΎαα»αααΆααααααααΌαααΆαααΆααααΆαα½ααααααΆααααΆαααααα·ααααα·α ααΌα αααα JavaScript α’αΆα ααααΎααααα·ααααα·ααΆααααα½ααααα»αααααααα½α αααααααααααααα·ααααα·ααΆαααααααααααΉααααα αΆαααααααααα½ααααα ααΎααααα αΌαααααα½αααααααΌαααΆαα α α
α α ααα ααΊααΆαα ααΆαααααααααα·ααααααααααα·ααΆααααααΆαααα αααααααΆααααααΆαα’αααΈααΈαααααααα αααα»ααααααα·ααΈαααααΎααα α ααααα·αααΎααΎαααααααΆαααα»αααΆααα½α ααΎααα»αααΆαα»ααααααΆαα αααααααΆαααΎαααααα αα ααααααααΎααααα‘ααααΈα’αα»αααααα½α ααΎααααα αΌαααΆαα»ααααΌααααα»αααΈααα α αΎααααα αααα αααααααααααΎαα α ααΆα’αα»ααααα αααβααΆβα’αααΈβααΆααα’ααβαααβαααβα’αΆα βααααΎβααΆαα α αΎαα₯α‘αΌαααααααα½ααα½αα±ααα αΆααα’αΆααααααααααΆααααΆααα ααΎα’ααααΆαααααΎαααΆααααα»α JavasScript αααΆαααΌα ααααα ?
ααΆααΆααα·α ααααααααΈααΎααα αααααα·ααΈαα»αααααΆααα½ααα·ααααααααΆααααααΎααΆαααΆαα½αα’αααΈαααααα α ααΆ WebAPI α αα»αααΆααα αααα»ααα½ααααααΉαααααΌαααΆαααααα·ααααα·ααΆαααααΆααααααααααααααΆααααΈαααααααΌαααΆααααα’αΆαααΆαααααα»αα ααΆααααααααΆααααΈαααααααααα½αααααααΌαααΆααα»αααΈαα½ααα ααααααααΆααααΆαααααα·ααααα·α ααααα·αααΎααΆαααΆαα»αααΆαα αα ααΆαααα½ααα ααΎααααα αααααα ααααα½αααΆαα·αα’αΆα αααα αΌααα αααα»ααααααΆαααα ααΆα αααΆααααΆαααααααΆαααααα ααααα»αααΆαα α ααΆααααααααΆα’αααααα αααΎααααα·αααΆαααΆαα αααΆααααΆαααααα»ααααααααΆ α αΆααααΆααααΈαα»αααΆααα·αα’αΆα ααα½αααΆαααΈαα½ααα ααααααααααααααΆαααα
ααΌααααα‘ααααΎαα§ααΆα αααααΆαααααα α αΎαα αΆααααααΎαααΆαα½αααΆαα’αα»ααααααΆααα αΆααααααααΆα ααΌααααα‘ααααΎααααααααΌαα’αααΈαααααΎαα‘αΎααα αααα»αααααααααα
console.log('Hi);
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) ααααΆαα’αααΈαααα»αααΎαα‘αΎαααα αα»αααΌααααααα·ααΈαα»αααααΊα αααΆαα αααααΆαα α ααΊαααα
2) αααααΆααααααΆααααααααΆ console.log('Hi') ααααΌαααΆααααααααα αααααΆαα α α
3) α αΎαααΆααααΌαααΆαααααα
4) αααααΆαααα console.log('Hi') ααααΌαααΆαααα ααααΈαααααΆαα α α
5) α₯α‘αΌαααααααααα ααΆααααααααΆ setTimeout (αα»αααΆα cb1() {β¦ }) α ααΆααααΌαααΆααααααααα αααααΆαα α α
6) ααΆααααααααΆ setTimeout(function cb1() {β¦ }) ααααΌαααΆαααααα·ααααα·α αααααα·ααΈαα»αααααΆαα’ααΈαααΊαα·ααααααΎααααααα·ααΈααααααααααααααΆααααααα½ααα Web API α ααΆααΉαααααΎααΆαααΆαααααααααα
7) ααΆααααααααΆ setTimeout(function cb1() {... }) ααΆααααα ααααΆαααΆααααααααα½α α αΎαααααΌαααΆαααα ααααΈαααααΆαα α α
8) ααΆααααααααΆ console.log('Bye') ααααΌαααΆααααααααα αααααΆαα α α
9) ααΆααααααααΆ console.log('Bye') ααααΌαααΆαααααα·ααααα·α
10) ααΆααααααααΆ console.log('Bye') ααααΌαααΆαααα ααααΈαααααΆαα α α
11) αααααΆααααΈαααΆαα αα ααΆαα 5000 ms ααΆαααααααα»ααα αααααα·ααΈαααααααααααΉααααα αα α αΎαααΆαα callback cb1 αα αααα»ααα½α callbackα
12) ααααα·ααα»αααααΉαααα·ααΆααααααα»αααΆα cb1 ααΈαα½αα α αααα‘αααααα·αα αΎαααΆααααΆαα ααΎαααααΆαα α α
13) αα»αααΆα cb1 ααααΌαααΆαααααα·ααααα· α αΎααααααα console.log('cb1') αα αααα»α call stack α
14) ααΆααααααααΆ console.log('cb1') ααααΌαααΆαααααα·ααααα·α
15) ααΆααααααααΆ console.log('cb1') ααααΌαααΆαααα ααααΈαααααΆαα α α
16) αα»αααΆα cb1 ααααΌαααΆαααα ααααΈαααααΆαα α α
αααααΎαα§ααΆα ααααααα»αααΈααΆαα·αα
ααΆααΆααααααΎαααΆαα, ααΎαααΆααα·αα·αααααΎαααΈαααααααα’ααααΆαααααΌαααΆαα’αα»αααααα αααα»α 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" α
- ααΆααααααααΆαααα α»αα’αΆα ααΆαααΉαααααΆαα
- α’ααααα·αα’αΆα αααα‘ααααααααααΆαα½αααΉαααΆααααα‘αααααα·αααΆαααα
ααΆαα½αααΉαααΆαααααααα 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
ααα»ααααααΆααααααΆααΆαααααααααααααααΆα ααΆα§ααΆα ααα ααΆααααααΆαα·αα’αΆα αα»αα ααααΆαααααΎααααΆαααΆαααΆαααΆαα½α tambourine α αΎαα’αααΈαααααααΆαααααα»ααααααΊααΆααΆααααΎαααΆαααΆαα½αααΉαααααααα½αα
ααΆααΆααααααΎαααΆαα ααΎαααΆαα αΌααα αα·αααΆαααααααααααα·ααΈαααααΆαααααα·αααααααΆααααΌαα αα»αααααΆαα? ααΆααααΆαααα’ α’αααα’αΆα αα ααααΎαααααα αα·αα’αααΈααΆ α αΎαααααααααα’αΆαααααααα α αΎααααα»αααΉαααααα
αααααα·ααΈαααααΆαααααα·ααααβααΊααΆααααΌααααΆαααααααααααα·ααΈααααααααααΎααα αΌααα·αααααα αα·αααΆαααααΆααααααΌαααΆαααααααααααΆαα ααΌααααα‘ααααΎαα±ααααΆααααα αααΆααααΆααΎααααααΈααα·ααααααααΊααΆα’αααΈα
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ
const input = ducument.querySelector('input');
const eventsArray = [];
// ΠΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ Π² ΠΌΠ°ΡΡΠΈΠ² eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);
α αΌααααααααΆααΎαααΆααααααααααα αΌαα ααΎααααα»ααααααΎαα’αΆαααα½α α αΎααααααΆααααΆαα keyup ααααααΉαααα·ααΆααααααα αΌα ααΎαααΉααααααΆαα»αααααΉαααα·ααΆααααα αααα»αα’αΆααααααααΎαα αααα»ααααααΆαα½αααααΆααααααα»αα ααααααααααΆααααΆα’αΆααααααααΎαααααΌαααΆαααααααααΆααααααααΆ i.e. αααααααααααααααΉαααα·ααΆααααααααααΊααααΆααααααααααααααααΉαααα·ααΆααααα»ααα α’αΆααααααααααΊααΆααααΌααΆααααααααα αΌααα·αααααα ααα»ααααααΆαα·αααΆααααΆααα αΌαααα ααΎααααΈα±ααα’αΆαααααααααΌαααΆαααα α ααΆααααααΈαααααα»ααααα·ααΆα ααΆααααΌαααα’αΆα ααΌαααααΉααααα’αα·αα·αααα½αα ααα½αααΆαα·ααααααααααΈααΆααααααααΆα ααΌα ααααααΎαααααααα·αααααααααα αΌαα
ααααααΈααα·αααααα
const { interval1 } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
ααα αΌαβααΊααΆα’αΆαααααα·αααααααααααΆαααααααααΆααααααααΆαααα’αΆα αααα αΆαααΆαα·ααααααααΆαααααΆααααααΌαα α₯α‘αΌααααααααΎαααΆααΎααΆααΆααααα½αααα»ααααΆαααα»αααΆααααααααΌαααααααααααΆααα½ααααααΌαα±ααα α ααααΉαααα·ααΆαααααΆα αααΎααα αααα»ααααααααααααααααΌαα ααΎαααααΆααααααΆαααααααΈα α αΎαααΆααΉαααΌαααααΉααααααΎααα αααααΆαααΆαααααΆααααααΌαα α αΎααααααΆααα RxJs α’αΆα ααααΎααΆααΆαα
RxJS ααΊααΆαααααΆααααααααΆααααααΎααΆαααΆαα½ααααααα·ααΈα’ααααΆα αα·ααααααα·ααΈααα’ααααΎααααΉαααα·ααΆααα αααααααΎααααΆαααααα’αΆα ααααααααΆαα αααααΆααααααααααΌαααααααααΌαααααΆα α’αΆα α’αααααααΆα, αααααααααα½αααΆα αααΎα (α’αααααααααααΆααα, α’ααααααα αααΆααα·ααΆα, αα»ααα·ααααΆ) αα·αααααα·ααααα·αααααααΆααααααΎααΆαααΆαα½αααααΉαααα·ααΆααα ααΌα ααΆααΆαα½αααΉαααΆααααααΌα (αααααΈ ααααα ααΆααααααα ααΆαα αα·αααααααααααΆααΈ JavaScript Array) α
α αΌαααΎααααααΈααααααα·αααΆααΌαααααΆααααααααΆααααααα
α’αΆα ααααααααΆα, α’ααααααααα, α’αααααα·α
Observable ααΊααΆααααααααΌαααααΆαααααΌααααααΎαααΉαααΎαα ααααΆαααααααΆααααααααααΆααααααΆαα’αα»αααα RxJs α ααΆααααΌαααΆαααααΆααααΆαα½αααααααΈααααα’αΆα ααααααααΆα αααα’αΆα ααΆαααΆααααααααΎαα·ααΈααΆαααααααΆαα
Observable α’αα»ααααααααααΆααααα½ααααααΆααααΆααααααΎααα αα α»ααααααααΆα αααα α ααΆ α’αααααααααααΆααα. αααααααααααααααααΆααα’αααααααααααΆαααααααΌαααΆαααα α ααΆ α’αααααα·α. αααα’αΆα ααΆα’αΆαα α’αααααααΎα‘αΎααα·α αααααααααΆα ααααααααααααΉαααα·ααΆααααα½αα ααα½αααα ααΌα ααααβααΎαβα’αΆα βαα·ααΆαβααΆαβααΆβ Observable ααΊβααΆβ conductor αααΆαβ Producer αα·α Observerα
Observable αααααααααααααΉαααα·ααΆααα Observer ααΈααααααα
- αααααΆαα - αα·ααααααααααΈα
- error - ααα α»ααα½αααααα·αααΎααααΆαααααα αααααααΆαααααΈααΎαααααα½αα ααααΉαααα·ααΆαααααααααααααααααα’αααΈααΆααααα ααααααααΆααα
- αααααα β αααααΆα’αααΈααΆααααα ααααααααΆααα αααααΆααααααΆααΉααα·αααΆααα·ααααααααααΈαααααα
αααααΎαααΆααααα αΆαα
αα αααα αΆααααααΎαααΎαααΉαααααΎαααΆαααααα 1, 2, 3 αα·ααααααΆααααΈ 1 αα·ααΆααΈα ααΎαααΉαααα½αααΆα 4 α αΎααααα ααααΆαααααΆαααααααΎαα
αα·αααααΆααα
α αΎααααααΆαααααααα»αααΆαααΉαααΆααΆαααααΆααααΆαα½αα±ααα αΆααα’αΆααααααααΆαααΆααααααα’αααΈααΆα π
ααΆαααΆα
αα ααααααααΎαααΆαααΆαααααΆα ααΎααααααΎαααααΆααααααΈαα½α ααΆαααΆαααααααααα±ααααΎαααΌααααααααΆααααα»αααΆααααααΆααααααααΎαα·ααΈααΆααααα αααααΆα. ααΎαβααβα’αΆα βααααΎβααΆβαααα»αβααΆαβααΆαβαααβααααΎβαα·ααΈβαααβαααα αααααα. ααΆααΆααααααΎαααΆαα ααΆααΆα‘αΌααΈαααααααΎαα’αΆα ααααααααα»ααααααααα‘αΆααααααααΎ αα. αα·ααΈααΆααααααααααα αα·ααα»αα ααααα½αααααΆαααΆααα½αααααααααααΆααΆααααα αΌαα αααα»αα ααααααααααΆααααΆαα ααααααααΎααααααΆα ααΎααααααΆαααΈααΆαααΆααα»ααΆαααΆααα’αα ααΌα ααΆααααα·αααΎαα½αααααΆαα α αα·ααΈαααααΆαα αα βαααβααΆαβαα»αα
ααααααααααααααΈα
HOT | ααα’α |
---|---|
α’αααααα·αααααΌαααΆααααααΎααα ααΆααααα αααα’αΆα ααααααααΆαα | α’αααααα·αααααΌαααΆααααααΎαα‘αΎααα ααΆααααα»ααααα’αΆα ααααααααΆαα |
αα·ααααααααααΌαααΆαααααααα ααααααα’αΆα ααααααααΆαααααΌαααΆααααααΎα | αα·ααααααααααΌαααΆααααααααΌααα αααααααΆαααΆα |
ααααΌαααΆααααααα·ααααΆαααααααααααΆααααΆααααααΆα | αααααααα‘αΆααααα ααααααααα½αα―αα |
ααααΎααααΆαααααααα½ααα α αααΎαα | ααααΎααααΆαααααααα½ααα αα½αα |
ααΆαααΆαααΆααα’ααααΆαα’ααααααααΌα ααααΆα | ααΆαααΆαααΊα―αααΆααα |
αα·ααααααα’αΆα ααΆααααα ααααα·αααΎα’ααααα·αααΆαααΆαααΆα | α αααααααααΆαααααΆαα‘αΎααα·αααΆααα’αααααααΆααααΆαααΆαααααΈα |
ααΎααααΈαααααααΆαααααααααααΆ αααα»αααΉααα·αααΈααΆαααααΆααααααα ααα»αααΆααΆααααααα αααα»αααααα»αα αα βαααβααΆβαααβα’αααβααβααα α αΆααβααΈβαααβαααβα’αααβα αΆααβααααΎαβααΎαα αααα»αααΉαααααααααααα αΌααααααΆαααα ααΉαααΆαα α ααΆααα αα αααα·ααααΆα ααΆααααα α’αααα α α αΌαααΆααααα ααααΆααααΆαααααΆαααΆααα‘ααααΈααΎααααα αα ααα»ααααα’αααα’αΆα αααα½αααΌαααααααααααααΎαααααΆαα
αααα»αα ααααααααααΆααααΆααΆαααα αΌααααα ααααα (αααα»αααΆαααααααΆαααα·ααααααααααααααΆααα αΎαααΆααααα αααα»ααα αααααααααααα»ααααα) - αααααΊααΆααα αΌααααααααΆααααααΌαααΈααα αΌααααααΆαααα ααΆαααα α αααα½αααΎαα‘αΎα - αααααααααααααΌαααααΎ)) αααα»αααΉααααααα§ααΆα αααααΈααΆαα’αα»ααααα
αααα»ααααα»αααααΎααΆαααΆαα½α Angular α ααΆααααααΎ rxjs αααΆααααααα ααΎααααΈααα½αααΆααα·αααααααα αααΆαααΈααα αααα»αααααΉαααΆααΉαααΆααααααααα‘αΆααααααΆαα α αΎαααααΎαααααααα‘αΆαααααα αααα»αααααΌαααααααΎ asyncPipe α ααααα·αααΎαααα»αααααΎααααααααα αααΎααα ααααααααααα αα·αααααααααααααΈααααααΆαααα·α αααααααΈαα½ααααΉαααααΎαα»ααα·ααααααααΈαααΆαααΈααα αααααΆααΏαα ααααααααα»αααΆααα·ααΆααα·α αααα»αα α αΎαααααα·αααΎαααα»αααααααααααααΈααααααΆαααα ααΆαααα αα½ααααααααΎααΉαααΎαα‘αΎαααααααα
ααΆααΌαα ααΆααααααΉαα’αααΈααααααααααα αΌαααΊαα·αααΆαα·ααΆααααααΆααα’αααα αΆααααααΎαααααΌα ααα»ααααααΆαααΆααααααΆααα
ααααα·ααααα·αα
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);
ααααα·ααααα·αααααααα±ααααΎαααΌααααααααΆααααα»αααΆααααααΈααααααααΆαααααααΎααααα»αααΆαααααΎααΆαααΆαα½αααααααΈαα αα½ααααα½ααααααααααααααΉαααα·ααΆααααααααΎαα‘αΎααα αααα»α Observable α ααΎαααΉααα·αα·αααααΎααα½αα ααα½ααααααααα·αααααα»α α αΎαααααααΆααααα’α·αααααααα’αααΈααααα·ααααα·ααα’αΆα ααααΌαααΆαααααΎααααααααΎαααααααΆαααα αααα»αααααααΆαααΆαααααααααα
ααααα·ααααα·αα - αα
α αΌαα αΆααααααΎαααΆαα½αααααα·ααααα·αααααα½αααα ααΆαααααΎα Observable αααααα’ααααΎαααααααΆααααα
ααααα·ααααα·αα - ααααα
ααααα·ααααα·ααααααα ααΌα ααααααααααΆααααα αΆα αααααααααΆααααααΈαα ααααα·αααΎααααα·ααααα·αααααα‘αααα·α ααΆααΉααααααααααααααα
ααααα·ααααα·αα - αα
αα - αααααααααα ααα½α emitters αααααΆααααΈααααααααααα‘αΆααααα ααα
ααααα·ααααα·αα - debounceTime
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)
);
ααααα·ααααα·αα - takeWhile
αααα ααααααααα αΌαααα takeWhile αααα‘αααα·ααα·α αααααΆααααΈαααααΆαααααΆαααΈαααααααα‘αΆαα
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 )
);
ααααα·ααααα·αα - αα½ααααα αΌαααααΆα α»αααααα
ααααα·ααααα·αααα½ααααα αΌαααααΆα α»ααααααααΊαααααααα ααΉααααααΆ.allα ααΆαα½ααααα αΌαααααΆααΌααααααααα‘αΆαααΆα αααΎαα αΌααα αααα»ααα½αα αααααΆααααΈαααααααα‘αΆαααΈαα½αααααααΎαααΆαααααΆααααΆαα αα ααΆαααα½α ααΎαααα½αααΆααααααα α»αααααααααα»αααΈααΈαα½αααααα»αααααααααΆα’αΆααα ααΎαααΈααα αααααΆααααΈααΆαααααΆαααΆαα½αααΈααααααΈααα½ααααα αΌαααααΆ ααΆααΉαααααααααααααααΈα
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));
ααααα·ααααα·αα - zip
Zip - αααα αΆααααααααΈαααααααα‘αΆαααΈαα½αα α αΎααααααΎαα’αΆαααααααα’ααααΎαααααααΆαααααα ααααα·αααΎααααααα·αααααΈαααααααα‘αΆαααΆαα½ααα ααααααα»αααΉααα·αααααΌαααΆααααααΎαα‘αΎαααα
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));
ααααα·ααααα·αα - forkJoin
forkJoin ααααααΆαααααααααα‘αΆαααααα ααα»ααααααΆαααα ααααααααα αααααααααααααα‘αΆαααΆααα’ααααααΌαααΆααααα ααα
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);
ααααα·ααααα·αα - αααααΈ
ααααα·ααααα·ααααααααααααααΈαααααααααααα emitter αα ααΆααααΈαα½αα
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)
);
ααααα·ααααα·αα - α ααααααα, ααα
ααααα·ααααα·αααααΆαααΈαα’αα»ααααΆαα±ααα’αααααααΎαααααααΆαα αααααΊαααααααΆαααΆαα½αααααα·ααααααΆαααααααααΆααα
ααααα·ααααα·ααα§αααααααααΎααααΆααα αααααααα’αΆα ααααααααΆαααααααΈααααααΆαααα ααΆαααα α
ααΎαααΆααααα ααααΆαα½αααααα·ααααα·ααα α αΌααααααα αααααΆαααα
αα·αααααΆααα
αα½α α αΎααααα»ααααα ααΉαααα αααα»ααα»αααααΆααααΉαα§ααΆα αααααΆαααααπ
αααα½ααΆααααααΆααα
αααα½ααΆααααααΆαααααΊααΆα§ααΆα αααααααΆααααααα αΌααααα α ααααΆααααΆαααααααΊααΆααααααααΌαααΆαααααααΎααα½αααα»ααααααααΆαααααΆααΆα’ααααααααα αα·αααααααα αααααΆααααααΆαααααΊααΆααΏααααα ααα»α α αΆαααΆα αααααΌααααααΆαααΈααΆα ααααα·αααΎααΎααα·ααΆαα’αααΈαα·ααΈααΆαααααααααΆαααααα ααΆαααααααΊα
- αααααΆαα - ααΆαααααααα·ααααααααααΈαα ααααααΈα
- ααα α»α - ααα α»ααα·αααΆααααα αααααααααα‘αΆα
- αααα αα - ααΆααααα αααααααααααα‘αΆα
- ααΆα - ααΆαααΆαααααΆα
- αααααΆα - αααααΆαααΈααααααΈα
- asObservable - ααααααααΆααα ααΆα’αααααααααααΆααα
- to Promise - ααααααααα ααΆααΆααααααΆ
αα»ααα·ααααΆααΆα α€ α₯ ααααααα
αα·αααααΆααα
ααΆαβααα»ααα 4 ααΆααβαααα»αβαα·ααΆαβαα βααΎβααααααΈα ααα»ααααβααΆβααΆαβααααΆαβααΆβαα½αααβααΆαβααααααβααααΆααβαααα ααΌα ααααα½ααααα·ααΆαααΆααααα αα·ααααα
αααααΆαααααΆαααα new Subject()
- αααααααα»ααα·ααααΆααΆαααααααα»αα αααααΎααααααααΆααααΆαααΆααααααα αααααΌαααααααααααα½αααΆααααααααΆααααΈααΆαααΆαα
αααααΆαααα’αΆαααααα·αα·ααΆ new BehaviorSubject( defaultData<T> )
- ααΆααααα·ααααααααα»α αααααααααααΆαααααΌαα
αααα»αα ααΆααααα
αΌααααααααααααΆαααΎαα ααααααααααΆαα»ααα·αααααααααααα αΆα
α»αααααα αααααααΌαααΆααααααΌααα
αααααΆαα ααααΆαααααααααΆααα·ααΈααΆααααααααααααΆαααααααααααααα ααααααααααααααααααααα
αα
α»ααααααααα
ααααα
α
αΆααα‘αΎααα·ααααααΆααα new ReplaySubject(bufferSize?: number, windowTime?: number)
- ααΆααααα
αΌαα’αΆα
ααααΆαααααΎαααΆα’αΆαα»αααααααΈαα½αααα αααααα·ααααααα’αΆααααααααααααααααΆααΉααααααΆαα»ααα
αααα»ααααα½αααΆ α αΎαααΆααΎαααΈααΈααα
ααααααααΎαααααΌαααΆαααΆαααααΆααααααΌαα
AsyncSubject new AsyncSubject()
- ααααΆαα’αααΈααΎαα‘αΎααα
αααααΆααα α αΎααααααααΉααααααααααα·αααααααααααα ααΆαβααβαααααβα
α»ααααααβααβααΆαβααααΆαβααα»αααααβααΉαβααααΌαβααΆαβαααα‘ααβααβαα·αα
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>)
- α―αααΆααα
αααααα’αααΈααΆαα α αΎααααα»αααΎαααΆααααΆααΎαααααΌαα ααΎβααααΆβααΉαβααΆβααΆααβααααΎβα’αααΈβααα ααΌαβαααααβαα ααΎαβααΉαβααααααβααΆα
ααα ααΆααΆααααααΎαααΆαα, ααΎαααΆαααααααααααα’αααΈααααααααΆαααααααα»αα ααααααΆααα’ααααα αααααααα αααα»ααααααΉαααΆααααααΆααααααΆαααααααααα α’αααα’αΆα α’αΆααααααΈα―αααΆααααααααααα½αα―ααα αααα»αααααΆααααααααΆαααΆαααααααααα
ααααααααα
https://vk.com/frontend_practice?w=wall-182297870_931 - αααααααΆαααα ααααααΈαhttps://habr.com/ru/company/ruvds/blog/337042/ - ααααααα JS ααααΎαααΆαα αα·αααααΆαααΌαα αααααΆαααΈα ααααααΆααααααααΎαααΆα ααΆαα α αααhttps://habr.com/ru/company/ruvds/blog/340508 - ααααααα JS ααααΎαααΆαα ααααα·ααα»αααααΉαααα·ααΆααα α’ααααΆα αα·ααα·ααΈααααΆααααΆαααΎααααΈαααααα’ααΌαααααα’ααααααααααΎ async / awaithttp://vanilla-js.blogspot.com/2014/09/event-loop-javasript.html - ααααααα Event Loop ααααΎαααΆααα αααα»α JavaSripthttps://tproger.ru/translations/asynchronous-javascript/ - ααΆααα·αααααααα JavaScript α’ααααΆαhttps://habr.com/ru/company/ruvds/blog/341880/ - ααΎ RxJS ααΊααΆα’αααΈ α αΎαα ααα»α’αααΈααΆαααΆααΆααΆααααααααααααα»αααΆαααΉαα’αααΈααΆ?https://medium.com/ngx/practical-use-rxjs-81aaab57045c - ααΆαα’αα»ααααααΆααααααααα RxJShttps://coursetro.com/posts/code/148/RxJS-Observables-TutorialβCreating-&-Subscribing-to-Observables - ααΆααααααα RxJS Observables - ααΆααααααΎα αα·αααΆααααααΆαα Observableshttps://slides.com/zenabsaleem/rxjs-hot-cold-observables#/ - RXJS: αααα αα·ααααααΆααα’αΆα ααααααααΆααhttps://clck.ru/FiPgB - ααααΆαα αα»αααΆααααααΆαααααααΎα Observable α ααααα·ααααα·αααhttps://www.learnrxjs.io/operators/ - ααααα·ααααα·αα RxJS ααΆαα§ααΆα αααhttps://rxjs.dev/api - αααααΈ APIhttps://clck.ru/FkS8Y - αααααααααααααΆααααα·αααΆααα·ααΆααα αααα»α RxJS
ααααα: www.habr.com