Ndewo, unu niile. Kpọtụrụ Omelnitsky Sergey. N'oge na-adịbeghị anya gara aga, m kwadoro iyi na mmemme reactive, ebe m na-ekwu maka asynchrony na Javascript. Taa ọ ga-amasị m ichikota ihe a.
Ma tupu anyị amalite isi ihe, ọ dị anyị mkpa ime okwu mmeghe. Ya mere, ka anyị malite na nkọwa: kedu ihe bụ stack na kwụ n'ahịrị?
tojupụtara bụ mkpokọta nke eweghachitere ihe ndị mejupụtara ya na “ikpeazụ na, mbụ pụta” LIFO ndabere
Kwuru bụ nchịkọta nke ihe ndị a na-enweta dị ka ụkpụrụ ("mbụ na, mbụ pụta" FIFO
Ọ dị mma, ka anyị gaa n'ihu.
Javascript bụ asụsụ mmemme nwere otu eriri. Nke a pụtara na ọ nwere naanị otu eri nke ogbugbu na otu nchịkọta ebe a na-akwụ ụgwọ ọrụ maka igbu ya. Ya mere, Javascript nwere ike ịrụ naanị otu ọrụ n'otu oge, ebe ọrụ ndị ọzọ ga-echere oge ha na ngwugwu ahụ ruo mgbe akpọrọ ha.
Okpokoro oku bụ usoro data nke, n'okwu dị mfe, na-edekọ ozi gbasara ebe dị na mmemme ebe anyị nọ. Ọ bụrụ na anyị wụba n'ime ọrụ, anyị na-agbanye ntinye ya n'elu nchịkọta. Mgbe anyị si n'ọrụ lọta, anyị na-ebupụta ihe kacha elu site na nchịkọta wee mechie ebe anyị si kpọọ ọrụ a. Nke ahụ bụ ihe nchịkọta nwere ike ime. Ma ugbu a ajụjụ na-adọrọ mmasị. Kedu ka asynchrony si arụ ọrụ na JavasScript?
N'ezie, na mgbakwunye na nchịkọta, ihe nchọgharị nwere kwụ n'ahịrị pụrụ iche maka ịrụ ọrụ na ihe a na-akpọ WebAPI. A ga-arụ ọrụ sitere na kwụ n'ahịrị a n'usoro naanị mgbe ekpochapụchara nke ọma. Naanị mgbe nke ahụ gasịrị, a na-etinye ha site na kwụ n'ahịrị n'elu ikpo ọkụ maka igbu. Ọ bụrụ na enwere opekata mpe otu mmewere na ngwugwu ahụ ugbu a, mgbe ahụ ha enweghị ike ịbanye na ngwugwu ahụ. Naanị n'ihi nke a, ọrụ ịkpọ oku site na oge nkwụsị na-abụkarị ihe na-ezighi ezi na oge, ebe ọ bụ na ọrụ ahụ enweghị ike isi na kwụ n'ahịrị gaa na nchịkọta mgbe ọ jupụtara.
Ka anyị leba anya n'ihe atụ na-esonụ ka anyị na-agabiga ya site na nzọụkwụ site na nzọụkwụ. Ka anyị hụkwa ihe na-eme na sistemụ.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Ruo ugbu a ọ nweghị ihe na-eme. Ihe njikwa ihe nchọgharị ahụ dị ọcha, nchịkọta oku ahụ tọgbọ chakoo.
2) Mgbe ahụ, a na-agbakwunye iwu console.log ('Hi') na nchịkọta oku.
3) Ma o mezuru
4) Mgbe ahụ, a ga-ewepụ console.log ('Hi') na nchịkọta oku.
5) Ugbu a, ka anyị gaa na setTimeout(ọrụ cb1() {… }) iwu. A na-agbakwunye ya na nchịkọta oku.
6) A na-eme iwu setTimeout (ọrụ cb1 () {… }). Ihe nchọgharị ahụ na-emepụta oge nke bụ akụkụ nke API Weebụ. Ọ ga-eme ngụkọta ọnụ.
7) Iwu setTimeout (ọrụ cb1 () {… }) arụchaala ọrụ ya wee wepụ ya na nchịkọta oku.
8) A na-agbakwunye iwu console.log ('Bye') na nchịkọta oku.
9) A na-eme iwu console.log ('Bye').
10) A na-ewepụ iwu console.log ('Bye') na nchịkọta oku.
11) Mgbe opekempe 5000ms gafeworo, ngụ oge gwụ ma tinye cb1 oku azụ n'ahịrị oku.
12) Loop ihe omume na-ewe ọrụ cb1 site na kwụ n'ahịrị oku wee tuba ya na nchịkọta oku.
13) A na-arụ ọrụ cb1 wee gbakwunye console.log('cb1') na nchịkọta oku.
14) A na-eme iwu console.log ('cb1').
15) A na-ewepụ iwu console.log ('cb1') na nchịkọta oku.
16) A na-ewepụ ọrụ cb1 na nchịkọta oku.
Ka anyị lee ihe atụ na mgbanwe
Ọfọn, anyị lere anya ka esi etinye asynchrony na Javascript. Ugbu a, ka anyị kwuo nkenke gbasara mmalite nke koodu asynchronous.
Mgbanwe nke koodu asynchronous.
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);
})
})
})
})
})
});Asynchronous mmemme dị ka anyị si mara ya na Javascript nwere ike ime naanị site na iji ọrụ. Enwere ike ịnyefe ha dị ka mgbanwe ọ bụla ọzọ na ọrụ ndị ọzọ. Otu a ka esi mụta ịkpọghachi azụ. Ma ọ dị jụụ, na-atọ ụtọ ma na-ekpo ọkụ, ruo mgbe ọ ga-aghọ mwute, obi mgbawa na mwute. Gịnị kpatara? Ee, ọ dị mfe:
- Ka mgbagwoju anya nke koodu ahụ na-etolite, ọrụ ahụ na-atụgharị ngwa ngwa n'ime ọtụtụ oghere akwụghị ụgwọ - "hellback call".
- Enwere ike ileghara njikwa njehie anya ngwa ngwa.
- Ị nweghị ike iweghachi okwu na nloghachi.
Site na ọbịbịa nke Nkwa, ọnọdụ ahụ adịla mma.
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);
});- Agbụ nke nkwa pụtara, nke mere ka ọgụgụ nke koodu ahụ dịkwuo mma
- Enwere ụzọ dị iche iche nke ntinye nke njehie
- Mkpebi dị ka ya na Promise.all agbakwunyere
- Anyị nwere ike dozie asynchrony akwụ ụgwọ site na async/echere
Ma nkwa ahụ nwere oke ya. Dịka ọmụmaatụ, nkwa, na-enweghị ịgba egwú na ịgbà, enweghị ike ịkagbu, na nke kachasị mkpa, ọ na-arụ ọrụ na otu uru.
Ọfọn, ebe a anyị na-eji nwayọọ na-abịaru nso reactive mmemme. Ike gwụrụ? Ọfọn, ihe dị mma bụ na ị nwere ike ịga na-eme ka ụfọdụ gulls, na-atụgharị uche ma laghachi na-agụkwu. M ga-aga n'ihu.
Mmemme mmeghachi omume - usoro mmemme lekwasịrị anya na ntinye data na mgbasa nke mgbanwe. Ka anyị lebakwuo anya n'ihe iyi data bụ.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Ka anyị were ya na anyị nwere mpaghara ntinye. Anyị na-emepụta ihe n'usoro, na maka igodo ọ bụla nke mmemme ntinye, anyị ga-echekwa ihe omume ahụ n'usoro anyị. N'otu oge ahụ, ọ ga-amasị m ịmara na a na-ahazi usoro anyị site na oge, i.e. ndetu nke ihe ndị mere eme dị ukwuu karịa ndetu nke ihe omume mbụ. Nhazi dị otú ahụ bụ usoro nfe data dị mfe, mana ọ kabeghị eru. Ka e wee kpọọ usoro a n'enweghị nsogbu ọ bụla iyi, ọ ga-enwerịrị ike ịgwa ndị debanyere aha na data ọhụrụ abanyela na ya. Ya mere, anyị na-abịa na nkọwa nke eruba.
iyi data
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Na-asọ bụ usoro data ahaziri site na oge nke nwere ike igosi na data agbanweela. Ugbu a, were ya ka ọ dị mfe ide koodu nke ịchọrọ ịkpalite ọtụtụ ihe omume n'akụkụ dị iche iche nke koodu maka otu ihe. Naanị ịdenye aha na iyi na ọ ga-agwa anyị mgbe mgbanwe mere. Na ọba akwụkwọ RxJs nwere ike ime nke a.
RxJS bụ ọbá akwụkwọ maka ịrụ ọrụ na mmemme asynchronous yana mmemme dabere na iji usoro a na-ahụ anya. Ọbá akwụkwọ ahụ na-enye ụdị isi A na-ahụ anya, ọtụtụ ụdị inyeaka (Ndị na-ekiri ihe, ndị nhazi oge, isiokwu) na ndị na-arụ ọrụ maka ịrụ ọrụ na ihe omume dị ka nchịkọta (maapụ, nzacha, belata, nke ọ bụla na ndị yiri ya sitere na JavaScript Array).
Ka anyị ghọta isi echiche nke ọba akwụkwọ a.
A na-ahụ anya, Onye nleba anya, Onye nrụpụta
A na-ahụ anya bụ ụdị ntọala mbụ anyị ga-eleba anya. Klas a nwere akụkụ bụ isi nke mmejuputa RxJ. Ejikọtara ya na iyi a na-ahụ anya, nke enwere ike ịdenye aha na iji usoro ndenye aha.
Ihe a na-ahụ anya na-emejuputa usoro inyeaka maka ịmepụta mmelite, nke a na-akpọ Observer. A na-akpọ isi iyi nke ụkpụrụ maka onye na-ekiri ihe Producer. Ọ nwere ike ịbụ n'usoro, ihe iterator, oghere webụ, ụdị ihe omume, wdg. Ya mere, anyị nwere ike ịsị na a na-ahụ anya bụ onye nduzi n'etiti Producer na Observer.
A na-ahụ anya na-ejikwa ụdị mmemme atọ:
- ọzọ - ọhụrụ data
- njehie - njehie ma ọ bụrụ na usoro akwụsị n'ihi mwepu. ihe omume a na-egosikwa njedebe nke usoro.
- zuru ezu - mgbaàmà banyere njedebe nke usoro. Nke a pụtara na agaghị enwekwa data ọhụrụ
Ka anyị hụ ngosi:
Ná mmalite, anyị ga-ahazi ụkpụrụ 1, 2, 3, na mgbe 1 sec. anyi nwetara 4 wee mechie eri anyi.
Na-eche echiche n'olu dara ụda
Ma mgbe ahụ, achọpụtara m na ọ bụ ihe na-atọ ụtọ ịkọ karịa ide banyere ya. 😀
ndenye aha
Mgbe anyị debanyere aha na iyi, anyị na-emepụta klas ọhụrụ ndenye aha, nke na-enye anyị nhọrọ ịwepu aha na usoro wepu aha. Anyị nwekwara ike ịmekọrịta ndenye aha site na iji usoro tinye. Ọfọn, ọ bụ ihe ezi uche dị na ya na anyị nwere ike ijikọta eriri wepụ. Ụzọ tinye na wepu ya na-anabata ndenye aha dị iche iche dị ka ntinye. Ọ ga-amasị m ịmara na mgbe anyị wepụrụ aha, anyị na-ewepụ aha na ndenye aha ụmụaka niile dị ka a ga-asị na ha na-akpọ usoro iwepụ aha. Gaba n'ihu.
Ụdị iyi
-ekpo ọkụ
COL
Emepụtara onye na-emepụta ihe n'èzí nke a na-ahụ anya
Emepụtara onye nrụpụta n'ime ihe a na-ahụ anya
A na-agafe data n'oge a na-emepụta ihe a na-ahụ anya
A na-enye data n'oge ndebanye aha.
Achọrọ mgbagha ọzọ iji wepu aha
Eriri na-akwụsị n'onwe ya
Na-eji mmekọrịta otu-na-ọtụtụ
Na-eji mmekọrịta otu na otu
Ndebanye aha niile nwere otu uru
Ndebanye aha nwere onwe
Enwere ike ịtufu data ma ọ bụrụ na enweghị ndenye aha
Na-ewepụta ụkpụrụ iyi niile maka ndenye aha ọhụrụ
Iji nye ntụnyere, m ga-eche na mmiri na-ekpo ọkụ dị ka ihe nkiri na sinima. Kedu mgbe ị bịara, site n'oge ahụ ị malitere ikiri. M ga-atụnyere iyi oyi na oku na ndị ahụ. nkwado. Onye ọ bụla na-akpọ oku na-ege ntị na ndekọ igwe nzaghachi site na mmalite ruo n'isi, mana ị nwere ike ịdebanye aha.
Ọ ga-amasị m ịmara na e nwekwara ihe ndị a na-akpọ iyi ọkụ (Ahụla m nkọwa dị otú ahụ adịkarịghị adịkarịghị na naanị na obodo ndị mba ọzọ) - nke a bụ iyi nke na-agbanwe site na iyi oyi na-ekpo ọkụ. Ajụjụ na-ebilite - ebe a ga-eji)) M ga-enye ihe atụ site na omume.
Ana m arụ ọrụ na Angular. Ọ na-eji rxjs arụ ọrụ. Iji nweta data na ihe nkesa, m na-atụ anya iyi oyi na m na-eji iyi a na template site na iji asyncPipe. Ọ bụrụ na m na-eji ọkpọkọ a ọtụtụ ugboro, mgbe ahụ, na-alaghachi na nkọwa nke iyi mmiri oyi, ọ bụla ọkpọkọ ga-arịọ data sitere na ihe nkesa, nke bụ ihe ijuanya na-ekwu na ọ dịghị ihe ọzọ. Ma ọ bụrụ na m gbanwee iyi oyi na-ekpo ọkụ, mgbe ahụ, arịrịọ ahụ ga-eme otu ugboro.
N'ozuzu, ịghọta ụdị nke eruba na-esi nnọọ ike maka beginners, ma dị mkpa.
rụọ
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Ndị na-arụ ọrụ na-enye anyị ohere iji iyi iyi rụọ ọrụ. Ha na-enyere aka ịchịkwa ihe omume na-eru na Observable. Anyị ga-atụle di na nwunye nke ndị kasị ewu ewu, na ozi ndị ọzọ gbasara ndị na-arụ ọrụ nwere ike ịhụ na njikọ na ozi bara uru.
Ndị na-arụ ọrụ-nke
Ka anyị bido na onye ọrụ enyemaka nke. Ọ na-emepụta Observable dabere na uru dị mfe.
Ndị na-arụ ọrụ-nyo
Onye na-ahụ maka nzacha, dị ka aha ahụ na-egosi, na-enyocha mgbama iyi. Ọ bụrụ na onye ọrụ ahụ laghachiri eziokwu, ọ ga-amali ọzọ.
Ndị na-arụ ọrụ - were
were - Na-ewere uru nke ọnụ ọgụgụ nke emits, mgbe nke ahụ gasịrị, iyi ahụ kwụsịrị.
Ndị na-arụ ọrụ-debounceTime
debounceTime - tụfuo ụkpụrụ ndị na-adaba n'ime oge a kapịrị ọnụ n'etiti data mmepụta - mgbe oge gafere, na-ewepụta uru ikpeazụ.
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)
);
Ndị ọrụ-na-ewe Mgbe
Na-ebuli ụkpụrụ ruo mgbe ọ ga-eweghachi ụgha, wee wepụ aha na eri ahụ.
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 )
);
Ndị na-arụ ọrụ-jikọta kacha ọhụrụ
Onye ọrụ jikọtara ọnụ kacha ọhụrụ dị ka promise.all. Ọ na-ejikọta ọtụtụ iyi n'ime otu. Mgbe eri ọ bụla mechara ma ọ dịkarịa ala otu emit, anyị na-enweta ụkpụrụ kachasị ọhụrụ site na nke ọ bụla dị ka nhazi. Ọzọkwa, mgbe ọ bụla emit sitere na iyi jikọtara ọnụ, ọ ga-enye ụkpụrụ ọhụrụ.
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));
Ndị ọrụ-zip
Zip - na-eche uru sitere na iyi ọ bụla wee mepụta usoro dabere na ụkpụrụ ndị a. Ọ bụrụ na uru ahụ esighị na eri ọ bụla, mgbe ahụ, a gaghị emepụta otu ahụ.
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));
Ndị na-arụ ọrụ - forkJoin
forkJoin na-ejikọkwa eriri, mana ọ na-ewepụta uru naanị mgbe eri niile zuru ezu.
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);
Ndị na-arụ ọrụ-map
Onye na-ahụ maka mgbanwe maapụ na-agbanwe uru emit ka ọ bụrụ nke ọhụrụ.
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)
);
Ndị na-arụ ọrụ - kesaa, kpatụ
Onye na-ahụ maka mgbata na-enye gị ohere ime mmetụta ọ bụla, ya bụ, omume ọ bụla na-emetụtaghị usoro.
Onye na-ahụ maka ọrụ òkè nwere ike gbanwee iyi oyi ka ọ bụrụ nke na-ekpo ọkụ.
Emeela ndị ọrụ. Ka anyị gaa n'ihu na Isiokwu.
Na-eche echiche n'olu dara ụda
M wee gaa ṅụọ tii. Ihe atụ ndị a agwụla m 😀
Ezinụlọ isiokwu
Ezinụlọ isiokwu bụ isi ihe atụ nke eriri ọkụ. Klas ndị a bụ ụdị ngwakọ na-eme dị ka ihe a na-ahụ anya na onye na-ekiri n'otu oge. Ebe isiokwu a bụ iyi na-ekpo ọkụ, a ga-ewepụrịrị ya. Ọ bụrụ na anyị na-ekwu maka ụzọ ndị bụ isi, mgbe ahụ, ndị a bụ:
- ọzọ - na-ebufe data ọhụrụ na iyi
- njehie - njehie na njedebe eri
- zuru ezu - njedebe nke eri
- denye aha - denye aha na iyi
- unsubscribe - wepu aha na eri
- asObservable - gbanwee ghọọ onye na-ekiri ihe
- kwere nkwa - na-agbanwe ghọọ nkwa
Kenye ụdị isiokwu 4 5.
Na-eche echiche n'olu dara ụda
M kwuru 4 na iyi, mana ọ tụgharịrị na ha gbakwunyere otu ọzọ. Dị ka okwu na-aga, dịrị ndụ ma mụta ihe.
Isiokwu Dị Mfe new Subject()- ụdị isiokwu kachasị mfe. Emepụtara na-enweghị paramita. Na-agafe ụkpụrụ ndị bịara naanị ka ndenye aha gachara.
Isiokwu omume new BehaviorSubject( defaultData<T> ) - n'uche nke m ụdị isiokwu-s kachasị. Ntinye na-ewe uru ndabara. Na-echekwa data nke mbipụta ikpeazụ mgbe niile, nke a na-ebufe mgbe ị na-edebanye aha. Klas a nwekwara usoro uru bara uru nke na-eweghachite uru iyi dị ugbu a.
Isi okwu megharịa new ReplaySubject(bufferSize?: number, windowTime?: number) - Nhọrọ, ọ nwere ike were dị ka arụmụka mbụ nha nke ihe nchekwa nke ụkpụrụ nke ọ ga-echekwa n'onwe ya, na oge nke abụọ nke anyị chọrọ mgbanwe.
isiokwu asyncing new AsyncSubject() - ọ dịghị ihe na-eme mgbe ịdenye aha, na uru ga-eweghachiri naanị mgbe zuru ezu. Naanị uru ikpeazụ nke iyi ka a ga-eweghachite.
Isiokwu WebSocket new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Akwụkwọ ahụ gbachiri nkịtị banyere ya na mụ onwe m na-ahụ ya maka oge mbụ. Onye maara ihe ọ na-eme, dee, anyị ga-agbakwunye.
Phew. Ọfọn, anyị atụlewo ihe niile m chọrọ ikwu taa. Echere na ozi a bara uru. Ị nwere ike ịgụ ndepụta nke akwụkwọ n'onwe gị na Ozi bara uru.
-enye aka ọmụma
isi: www.habr.com