ืฉืืื ืืืืื. ืกืจืืื ืืืืื ืืฆืงื ืืงืฉืจ. ืื ืืืื ืืืจืืชื ืืจื ืขื ืชืื ืืช ืจืืืงืืืื, ืฉืื ืืืืจืชื ืขื ืืกืื ืืจืื ื ื-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(ืคืื ืงืฆืื cb1() {โฆ }) ืืืืฆืขืช. ืืืคืืคื ืืืฆืจ ืืืืืจ ืฉืืื ืืืง ืืืืฉืง ื-API ืฉื ืืืื ืืจื ื. ืื ืืืฆืข ืกืคืืจื ืืืืืจ.
7) ืืคืงืืื setTimeout(function cb1() {โฆ }) ืืฉืืืื ืืช ืขืืืืชื ืืืืกืจื ืืืกื ืืช ืืฉืืืืช.
8) ืืคืงืืื console.log('ืืื') ืืชืืืกืคืช ืืขืจืืืช ืืฉืืืืช.
9) ืืคืงืืื console.log('Bye') ืืืืฆืขืช.
10) ืืคืงืืื console.log('ืืื') ืืืกืจืช ืืืกื ืืช ืืฉืืืืช.
11) ืืืืจ ืฉืืืคื ืืคืืืช 5000 ืืืคืืืช ืืฉื ืืื, ืืืืืืจ ืืกืชืืื ืืืฆืื ืืช ืืืชืงืฉืจืืช ืืืจื cb1 ืืชืืจ ืืืชืงืฉืจืืช ืืืจื.
12) ืืืืืช ืืืืจืืข ืืืงืืช ืืช ืืคืื ืงืฆืื cb1 ืืืชืืจ ืืืชืงืฉืจืืช ืืืจื ืืืืงืืช ืืืชื ืืขืจืืืช ืืฉืืืืช.
13) ืืคืื ืงืฆืื cb1 ืืืืฆืขืช ืืืืกืืคื ืืช console.log('cb1') ืืขืจืืืช ืืฉืืืืช.
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 ื ืืชื ืืืืฉื ืจืง ืขื ืืื ืคืื ืงืฆืืืช. ื ืืชื ืืืขืืืจ ืืืชื ืืื ืื ืืฉืชื ื ืืืจ ืืคืื ืงืฆืืืช ืืืจืืช. ืื ื ืืืื ืฉืืืืช ืืืืจืืช. ืืื ืืื ืื, ืืืฃ ืืฉืืื, ืขื ืฉืื ืืืคื ืืขืฆื, ืืื ืืืืื ืืขืฆื. ืืื? ืื ืคืฉืื:
- ืืื ืฉืืืืจืืืืช ืฉื ืืงืื ืืืื, ืืคืจืืืงื ืืืคื ืืืืืจืืช ืืืืืงืื ืื ืืจืืจืื, ืืงืื ื ืื ืฉืื ืืฉืื - "ืืขืืืื ืืืชืงืฉืจ ืืืืจื".
- ืงื ืืคืกืคืก ืืืคืื ืืฉืืืืืช.
- ืืชื ืื ืืืื ืืืืืืจ ืืืืืืื ืขื ืืืจื.
ืขื ืื ืืกืชื ืฉื ืืืืื, ืืืฆื ืืฉืชืคืจ ืืขื.
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/wait
ืืื ืืืืืืืช ืืฉ ืืืืืืช. ืืืฉื, ืื ืืคืฉืจ ืืืื ืืืืื ืืื ืืจืงืื ืขื ืืืืืจืื, ืืื ืฉืืื ืืฉืื ืื ืฉืื ืขืืื ืขื ืขืจื ืืื.
ืืืื, ื ืืืฉื ื ืืฆืืจื ืืืงื ืืชืื ืืช ืจืืืงืืืื. ืขืืืฃ? ืืืื, ืืืจืื ืืืื, ืืชื ืืืื ืืืืช ืืืืื ืชื, ืืืฉืื ืขื ืื ืืืืืืจ ืืงืจืื ืขืื. ืืื ื ืืืฉืื.
ืชืื ืืช ืจืืืงืืืืโืืื ืคืจืืืืืช ืชืื ืืช ืืืชืืงืืช ืืืจืืืืช ื ืชืื ืื ืืืคืฆืช ืฉืื ืืืื. ืืืื ื ืกืชืื ืืงืจืื ืขื ืื ืื ืืจื ื ืชืื ืื.
// ะะพะปััะฐะตะผ ัััะปะบั ะฝะฐ ัะปะตะผะตะฝั
const input = ducument.querySelector('input');
const eventsArray = [];
// ะััะธะผ ะบะฐะถะดะพะต ัะพะฑััะธะต ะฒ ะผะฐััะธะฒ eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);
ืืืื ื ืืืืื ืฉืืฉ ืื ื ืฉืื ืงืื. ืื ื ืืืฆืจืื ืืขืจื ืืืื ืืงืฉืื ืฉื ืืืจืืข ืืงืื ื ืืืกื ืืช ืืืืจืืข ืืืขืจื ืฉืื ื. ืืื ืขื ืืืช, ืื ื ืจืืฆื ืืฆืืื ืฉืืืขืจื ืฉืื ื ืืืืื ืืคื ืืื, ืืืืืจ. ืืืื ืฉื ืืืจืืขืื ืืืืืจืื ืืืชืจ ืืืื ืืืืื ืฉื ืืืจืืขืื ืืืงืืืื ืืืชืจ. ืืขืจื ืืื ืืื ืืืื ืคืฉืื ืฉื ืืจืืืช ื ืชืื ืื, ืืื ืืื ืขืืืื ืื ืืจืืื. ืืื ืฉืืืขืจื ืืื ืืืงืจื ืืืืื ืืจื, ืขืืื ืืืืืช ืืกืืื ืืืืฉืื ืืืืืืข โโืืื ืืืื ืฉืืืืขื ืืืื ื ืชืื ืื ืืืฉืื. ืื ืืืขื ื ืืืืืจื ืฉื ืืจืืื.
ืืจื ื ืชืื ืื
const { interval1 } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
ืชืืจืืโืืื ืืขืจื ืฉื ื ืชืื ืื ืืืืืื ืื ืืคื ืืื ืฉืืืื ืืืฆืืืข ืขื ืื ืฉืื ืชืื ืื ืืฉืชื ื. ืขืืฉืื ืชืืจื ืืขืฆืืื ืืื ื ืื ืืืชืื ืงืื ืฉืื ืคืขืืื ืืืช ืืฆืจืืื ืงืจืืื ืืืกืคืจ ืืืจืืขืื ืืืืงืื ืฉืื ืื ืฉื ืืงืื. ืื ืื ื ืคืฉืื ื ืจืฉืืื ืืืจื ืืืื ืืืืืข ืื ื ืืืฉืจ ืืชืจืืฉื ืฉืื ืืืื. ืืกืคืจืืืช RxJs ืืืืื ืืขืฉืืช ืืืช.
RxJS ืืื ืกืคืจืืื ืืขืืืื ืขื ืชืืื ืืืช ืืกืื ืืจืื ืืืช ืืืืืกืกืืช ืืืจืืขืื ืชืื ืฉืืืืฉ ืืจืฆืคืื ื ืืชื ืื ืืฆืคืืื. ืืกืคืจืืื ืืกืคืงืช ืืช ืืกืื ืืขืืงืจื ื ืฆืคื, ืืกืคืจ ืกืืื ืขืืจ (ืฆืืคื, ืืชืืื ืื, ื ืืฉืืื) ืืืคืขืืืื ืืขืืืื ืขื ืืืจืืขืื ืืื ืขื ืืืกืคืื (ืืคื, ืืกื ื, ืฆืืฆื, ืื ืืืืืื ืืืขืจื JavaScript).
ืืืื ื ืืื ืืช ืืืืฉืืื ืืืกืืกืืื ืฉื ืกืคืจืืื ืื.
ื ืฆืคื, ืฆืืคื, ืืคืืง
ื ืืชื ืืฆืคืืช ืืื ืืกืื ืืืกืืกื ืืจืืฉืื ืฉื ืืื. ืืืืงื ืื ืืืืื ืืช ืืืืง ืืขืืงืจื ืฉื ืืืืฉืื RxJs. ืืื ืืฉืืื ืืืจื ืื ืืชื ืืฆืคืืื, ืฉื ืืชื ืืืืจืฉื ืืืื ืืืืฆืขืืช ืฉืืืช ืืื ืื.
Observable ืืืืฉืืช ืื ืื ืื ืขืืืจ ืืืฆืืจืช ืขืืืื ืื, ืื ืฉื ืงืจื ืืฉืงืืฃ. ืืงืืจ ืืขืจืืื ืขืืืจ ืืฆืืคื ื ืงืจื ืืคืืง. ืื ืืืื ืืืืืช ืืขืจื, ืืืืจืืืจ, ืฉืงืข ืืื ืืจื ื, ืืืจืืข ืืืฉืื ืืื'. ืื ืื ืื ื ืืืืืื ืืืืจ ืฉ-observable ืืื ืื ืฆื ืืื ืืคืืง ืืฆืืคื.
Observable ืืืคื ืืฉืืืฉื ืกืืืื ืฉื ืืืจืืขื Observer:
- ืืื - ื ืชืื ืื ืืืฉืื
- ืฉืืืื - ืฉืืืื ืื โโืืจืฆืฃ ืืกืชืืื ืขืงื ืืจืื. ืืืจืืข ืื ืืจืื ืื ืขื ืืฉืืืช ืืจืฆืฃ.
- ืฉืื - ืืืช ืืืื ืกืืฃ ืืจืฆืฃ. ืื ืืืืจ ืฉืื ืืืื ืืืชืจ ื ืชืื ืื ืืืฉืื
ืืื ื ืจืื ืืช ืืืืืื:
ืืืชืืื ื ืขืื ืืช ืืขืจืืื 1, 2, 3 ืืืืืจ ืฉื ืืื ืืืช. ื ืงืื 1 ืื ืกืืื ืืช ืืืจื ืฉืื ื.
ืืืฉื ืืงืื ืจื
ืืื ืืื ืชื ืฉืืกืคืจ ืื ืืืชืจ ืืขื ืืื ืืืืชืื ืขื ืื. ๐
ืึดื ืึผื
ืืฉืื ืื ื ื ืจืฉืืื ืืืจื ืื ืื ื ืืืฆืจืื ืืืืงื ืืืฉื ืึดื ืึผืืืืื ืฉื ืืชื ืื ื ืืช ืืืคืฉืจืืช ืืืื ืืช ืืื ืื ืืืืฆืขืืช ืืฉืืื ืืืื ืืช ืืื ืื. ืื ื ืืืืืื ืื ืืงืืฅ ืื ืืืื ืืฉืืื ืืืืกืืฃ. ืืืื, ืื ืืืืื ื ืฉื ืืื ืืืื ืงืืืฆืืช ืฉื ืฉืจืฉืืจืื ืืืืฆืขืืช ืืืกืืจ. ืฉืืืืช ืืืืกืคื ืืืืกืจื ืืงืืืื ืื ืื ืืืจ ืืงืื. ืืจืฆืื ื ืืฆืืื ืฉืืืฉืจ ืื ื ืืืืืื ืืช ืืื ืื, ืื ื ืืืืืื ืืช ืืื ืื ืืื ืื ืืื ืืืืืื ืืืืื ืื ืงืจืื ืืฉืืืช ืืืืื ืืื ืื. ืื ืขื ืื.
ืกืืื ืืจืืื
ืึทื | ืงึทืจ |
---|---|
ืืืคืืง ื ืืฆืจ ืืืืฅ ืืฆืคืืื | ืืืคืืง ื ืืฆืจ ืืชืื ื ืืชื ืืฆืคืืื |
ืื ืชืื ืื ืืืขืืจืื ืืืื ืืฆืืจืช ืื ืฆืคื | ืื ืชืื ืื ืืกืืคืงืื ืืืื ืืืจืฉืื |
ืฆืจืื ืืืืืื ื ืืกืฃ ืืืืืื ืืื ืื | ืืฉืจืฉืืจ ืืกืชืืื ืืขืฆืื |
ืืฉืชืืฉ ืืืขืจืืช ืืืกืื ืฉื ืืื ืืจืืื | ืืฉืชืืฉ ืืืขืจืืช ืืืกืื ืฉื ืืื ืืืื |
ืืื ืืื ืืืื ืืฉ ืืืชื ืืฉืืขืืช | ืืื ืืืื ืื ืขืฆืืืืื |
ื ืชืื ืื ืขืืืืื ืืืืช ืืืืืื ืื ืืื ืื ืื ืื | ืืืฆืื ืืืืฉ ืืช ืื ืขืจืื ืืืจื ืขืืืจ ืื ืื ืืืฉ |
ืืื ืืชืช ืื ืืืืื, ืืืืชื ืืืฉื ืขื ืืจื ืื ืืขื ืกืจื ืืชืืืืจืื. ืืืืื ื ืงืืืช ืืื ืืืขืช, ืืืืชื ืจืืข ืืชืืืช ืืฆืคืืช. ืืืืชื ืืฉืืื ืืจืืื ืงืจื ืืฉืืื ืืืื ืืืืืื. ืชืืืื. ืื ืืชืงืฉืจ ืืืืื ืืืงืืืช ืืืืืจ ืืงืืื ืืชืืืืชื ืืขื ืกืืคื, ืื ืืชื ืืืื ืื ืชืง ืืืืฆืขืืช ืืืืื ืืจืฉืื.
ืืจืฆืื ื ืืฆืืื ืฉืืฉ ืื ืื ืฉื ืงืจื ืืจืืืืช ืืืืช (ื ืชืงืืชื ืืืืืจื ืื ืืขืืชืื ืจืืืงืืช ืืืืชืจ ืืจืง ืืงืืืืืช ืืจืืช) - ืืืืืจ ืืืจืืื ืฉืืืคื ืืืจืืื ืงืจื ืืืจืืื ืืื. ื ืฉืืืช ืืฉืืื - ืืืื ืืืฉืชืืฉ)) ืืชื ืืืืื ืืืชืจืืื.
ืื ื ืขืืื ืขื 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. ื ืกืชืื ืขื ืืื ืืืคืืคืืืจืืื ืืืืชืจ, ืืคืจืืื ื ืืกืคืื ืขื ืืืคืขืืืื ื ืืชื ืืืฆืื ืืืืฆืขืืช ืืงืืฉืืจืื ืืืืืข ืืฉืืืืฉื.
ืืคืขืืืื - ืฉื
ื ืชืืื ืขื ืืคืขืื ืืขืืืจ ืฉื. ืื ืืืฆืจ ืฆืคืืื ืืืืืกืกืช ืขื ืขืจื ืคืฉืื.
ืืคืขืืืื - ืืกื ื
ืืคืขืื ืืืกื ื, ืืคื ืฉืืฉื ืืจืื, ืืกื ื ืืช ืืืช ืืืจื. ืื ืืืืคืจืืืจ ืืืืืจ true, ืืื ืืืื ืืืื.
ืืคืขืืืื - ืงื
take โ ืืืงื ืืช ืืขืจื ืฉื ืืกืคืจ ืืคืืืืื, ืฉืืืจืื ืืกืชืืื ืืืื.
ืืคืขืืืื - 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 ืืืืืจ 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 )
);
ืืคืขืืืื - combineLatest
ืืืืคืจืืืจ combineLatest ืืืื ืืืงืฆืช ื- belofte.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);
ืืคืขืืืื - ืืคื
ืืืคืจืืืจ ืฉืื ืื ืืืคื ืืืคื ืืช ืขืจื ืืคืืื ืืขืจื ืืืฉ.
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 - ืืืคืื ืืฆืืคื
- toPromise - ืืืคื ืืืืืื
ืืฉื ื 4 5 ืกืืื ื ืืฉืืื.
ืืืฉื ืืงืื ืจื
ืืื 4 ืื ืฉืื ืฉืืืืจื ืืืจื, ืืื ืืชืืจืจ ืฉืื ืืืกืืคื ืขืื ืืื. ืืื ืฉืืืืจืื, ืื ืืชืืื.
ื ืืฉื ืคืฉืื new Subject()
- ืืกืื ืืคืฉืื ืืืืชืจ ืฉื ื ืืฉืืื. ื ืืฆืจ ืืื ืคืจืืืจืื. ืืขืืืจ ืขืจืืื ืฉืืชืงืืื ืจืง ืืืืจ ืื ืื.
ื ืืฉื ืืชื ืืืืช new BehaviorSubject( defaultData<T> )
โ ืืืขืชื, ืกืื ืื ืืฉื ืื ืคืืฅ ืืืืชืจ. ืืงืื ืืงืื ืืช ืขืจื ืืจืืจืช ืืืืื. ืฉืืืจ ืชืืื ืืช ืื ืชืื ืื ืฉื ืืืืืืื ืืืืจืื, ืืฉืจ ืืืขืืจ ืืขืช ืืืจืฉืื. ืืืืืงื ืื ืืฉ ืื ืฉืืืช ืขืจื ืฉืืืืฉืืช, ืืืืืืจื ืืช ืืขืจื ืื ืืืื ืฉื ืืืจื.
ReplaySubject 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 ืขืืื: ืืืืืช ืืืจืืขืื, ืืกืื ืืจืื ืืืืฉ ืืจืืื ืืฉืืคืืจ ืงืื ืืืืฆืขืืช ืืกืื ืืจืื / ืืืชืืhttp://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