Salaam wote. Sergey Omelnitsky anawasiliana. Si muda mrefu uliopita nilishiriki mtiririko kwenye programu tendaji, ambapo nilizungumza juu ya asynchrony katika JavaScript. Leo ningependa kuchukua maelezo juu ya nyenzo hii.
Lakini kabla ya kuanza nyenzo kuu, tunahitaji kufanya maelezo ya utangulizi. Basi hebu tuanze na ufafanuzi: stack na foleni ni nini?
Rafu ni mkusanyiko ambao vipengele vyake hupatikana kwa msingi wa LIFO wa mwisho, wa kwanza
Zamu ni mkusanyiko ambao vipengele vyake hupatikana kwa msingi wa FIFO wa kwanza, wa kwanza
Sawa, tuendelee.
JavaScript ni lugha ya programu yenye nyuzi moja. Hii inamaanisha kuwa kuna uzi mmoja tu wa utekelezaji na mrundikano mmoja ambao utendakazi zimewekwa kwenye foleni kwa ajili ya utekelezaji. Kwa hiyo, JavaScript inaweza tu kufanya operesheni moja kwa wakati mmoja, wakati shughuli nyingine zitasubiri zamu yao kwenye stack hadi iitwe.
Wito stack ni muundo wa data ambao, kwa urahisi, hurekodi habari kuhusu mahali katika programu tulipo. Ikiwa tunapita kwenye kazi, tunasukuma kuingia kwake hadi juu ya stack. Tunaporudi kutoka kwa chaguo la kukokotoa, tunatoa kipengee cha juu kabisa kutoka kwenye rafu na kuishia nyuma pale tulipoita kipengele cha kukokotoa. Haya ndiyo yote ambayo stack inaweza kufanya. Na sasa swali la kuvutia sana. Asynchrony inafanyaje kazi katika JavasScript?
Kwa kweli, pamoja na stack, vivinjari vina foleni maalum ya kufanya kazi na kinachojulikana kama WebAPI. Chaguo za kukokotoa katika foleni hii zitatekelezwa kwa mpangilio tu baada ya rafu kufutwa kabisa. Ni baada ya hii tu ndipo wanasukumwa kutoka kwenye foleni hadi kwenye stack kwa ajili ya kutekelezwa. Ikiwa kuna angalau kipengele kimoja kwenye rafu kwa sasa, basi haziwezi kuongezwa kwenye rafu. Ni kwa sababu ya hii kwamba kazi za kupiga simu kwa kuisha kwa muda mara nyingi sio sahihi kwa wakati, kwani chaguo la kukokotoa haliwezi kutoka kwenye foleni hadi kwenye rafu wakati imejaa.
Wacha tuangalie mfano ufuatao na tuanze na utekelezaji wake wa hatua kwa hatua. Wacha tuone kinachotokea kwenye mfumo.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Bado hakuna kinachoendelea. Console ya kivinjari iko wazi, rundo la simu ni tupu.
2) Kisha amri console.log('Hi') huongezwa kwenye rundo la simu.
3) Na inatimia
4) Kisha console.log('Hi') inatolewa kutoka kwa rundo la simu.
5) Sasa nenda kwa amri setTimeout(function cb1() {... }). Inaongezwa kwenye safu ya simu.
6) Amri ya setTimeout(function cb1() {β¦ }) inatekelezwa. Kivinjari huunda kipima muda ambacho ni sehemu ya API ya Wavuti. Itafanya hesabu.
7) Amri ya setTimeout(function cb1() {... }) imekamilisha kazi yake na imeondolewa kwenye rundo la simu.
8) Amri console.log('Bye') imeongezwa kwenye safu ya simu.
9) Amri ya console.log('Bye') inatekelezwa.
10) Amri console.log('Bye') imeondolewa kutoka kwa rundo la simu.
11) Baada ya angalau ms 5000 kupita, kipima muda huisha na kuweka callback cb1 kwenye foleni ya kurudi nyuma.
12) Kitanzi cha tukio huchukua chaguo za kukokotoa cb1 kutoka kwa foleni ya kurudi nyuma na kukiweka kwenye rundo la simu.
13) Kazi ya cb1 inatekelezwa na inaongeza console.log('cb1') kwenye rundo la simu.
14) Amri console.log('cb1') inatekelezwa.
15) Amri console.log('cb1') imeondolewa kutoka kwa rundo la simu.
16) Kazi cb1 imeondolewa kutoka kwa rundo la simu.
Wacha tuangalie mfano katika mienendo:
Kweli, tuliangalia jinsi asynchrony inatekelezwa katika JavaScript. Sasa hebu tuzungumze kwa ufupi juu ya mageuzi ya msimbo wa asynchronous.
Mageuzi ya msimbo wa 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);
})
})
})
})
})
});Upangaji wa Asynchronous kama tunavyoijua katika JavaScript inaweza tu kutekelezwa na vitendakazi. Wanaweza kupitishwa kama tofauti nyingine yoyote kwa kazi nyingine. Hivi ndivyo wapiga simu walivyozaliwa. Na ni ya kupendeza, ya kufurahisha na ya kucheza, hadi inageuka kuwa huzuni, huzuni na huzuni. Kwa nini? Ni rahisi:
- Kadiri ugumu wa nambari unavyoongezeka, mradi unabadilika haraka kuwa vizuizi visivyo wazi, vilivyowekwa mara kwa mara - "kuzimu ya kurudi nyuma".
- Ushughulikiaji wa hitilafu unaweza kuwa rahisi kukosa.
- Hauwezi kurudisha misemo kwa kurudi.
Pamoja na ujio wa Promise, hali ikawa nzuri kidogo.
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);
});- Minyororo ya ahadi ilionekana, ambayo iliboresha usomaji wa kanuni
- Njia tofauti ya kukamata makosa imeonekana
- Aliongeza uwezekano wa utekelezaji sambamba kwa kutumia Promise.all
- Tunaweza kutatua usawazishaji uliowekwa kwa kutumia async/ait
Lakini ahadi zina mapungufu yake. Kwa mfano, ahadi haiwezi kufutwa bila kucheza na tari, na muhimu zaidi ni kwamba inafanya kazi kwa thamani moja.
Kweli, tumekaribia programu tendaji kwa urahisi. Umechoka? Kweli, kwa bahati nzuri, unaweza kwenda kutengeneza chai, fikiria juu yake na urudi kusoma zaidi. Na nitaendelea.
Upangaji tendajiβni dhana ya upangaji inayolenga mtiririko wa data na uenezi wa mabadiliko. Wacha tuangalie kwa undani jinsi mtiririko wa data ni.
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ
const input = ducument.querySelector('input');
const eventsArray = [];
// ΠΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ Π² ΠΌΠ°ΡΡΠΈΠ² eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Wacha tufikirie kuwa tunayo sehemu ya uingizaji. Tunaunda safu na kwa kila ufunguo wa tukio la ingizo tutahifadhi tukio katika safu yetu. Wakati huo huo, ningependa kutambua kwamba safu yetu imepangwa kwa wakati, i.e. fahirisi ya matukio ya baadaye ni kubwa kuliko fahirisi ya yale ya awali. Safu kama hiyo ni kielelezo kilichorahisishwa cha mtiririko wa data, lakini bado sio mtiririko. Ili safu hii iitwe mtiririko kwa usalama, ni lazima iweze kuwafahamisha waliojisajili kuwa data mpya imeingia humo. Kwa hivyo tunakuja kwenye ufafanuzi wa mtiririko.
Mtiririko wa data
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Mtiririkoβni safu ya data iliyopangwa kulingana na wakati ambayo inaweza kuonyesha kuwa data imebadilika. Sasa fikiria jinsi inavyofaa kuandika msimbo ambao kitendo kimoja kinahitaji kuita matukio kadhaa katika sehemu tofauti za msimbo. Tunajiandikisha kwa mtiririko na itatuarifu mabadiliko yanapotokea. Na maktaba ya RxJs inaweza kufanya hivi.
RxJS ni maktaba ya kufanya kazi na programu zisizolingana na zinazotegemea matukio kwa kutumia mfuatano unaoonekana. Maktaba hutoa aina ya msingi Inaonekana, aina kadhaa za msaidizi (Mtazamaji, Waratibu, Mada) na waendeshaji kwa kufanya kazi na matukio kama vile makusanyo (ramani, chujio, punguza, kila na zinazofanana kutoka kwa JavaScript Array).
Hebu tuelewe dhana za msingi za maktaba hii.
Anayeonekana, Mtazamaji, Mtayarishaji
Inayoonekana ni aina ya kwanza ya msingi ambayo tutaangalia. Darasa hili lina sehemu kuu ya utekelezaji wa RxJs. Inahusishwa na mtiririko unaoonekana, ambao unaweza kujisajili kwa kutumia mbinu ya kufuatilia.
Inayoonekana hutumia utaratibu wa msaidizi wa kuunda sasisho, kinachojulikana Mwangalizi. Chanzo cha maadili kwa Mtazamaji kinaitwa Mtayarishaji. Hii inaweza kuwa safu, iterator, soketi ya wavuti, aina fulani ya tukio, nk. Kwa hivyo tunaweza kusema kuwa kinachoonekana ni kondakta kati ya Mtayarishaji na Mtazamaji.
Inayoonekana hushughulikia aina tatu za matukio ya Waangalizi:
- ijayo - data mpya
- kosa - hitilafu ikiwa mlolongo uliisha kwa sababu ya ubaguzi. tukio hili pia linamaanisha kukamilika kwa mlolongo.
- kamili - ishara kuhusu kukamilika kwa mlolongo. Hii inamaanisha kuwa hakutakuwa na data mpya zaidi.
Wacha tuone onyesho:
Mwanzoni tutashughulikia maadili 1, 2, 3, na baada ya sekunde 1. tutapata 4 na kumaliza mkondo wetu.
Kufikiri kwa sauti
Na kisha nikagundua kuwa kuiambia ilikuwa ya kuvutia zaidi kuliko kuandika juu yake. π
Subscription
Tunapojiandikisha kwa mtiririko tunaunda darasa jipya usajiliambayo inatupa uwezo wa kujiondoa kwa kutumia mbinu unsubscribe. Tunaweza pia kupanga usajili kwa kutumia mbinu kuongeza. Kweli, ni sawa kwamba tunaweza kutenganisha nyuzi kwa kutumia kuondoa. Mbinu za kuongeza na kuondoa zinakubali usajili mwingine kama ingizo. Ningependa kutambua kwamba tunapojiondoa, tunajiondoa kutoka kwa usajili wote wa watoto kana kwamba wameita njia ya kujiondoa. Endelea.
Aina za mito
HOT
BONYEZA
Mtayarishaji ameundwa nje ya kuonekana
Mtayarishaji ameundwa ndani ya kuonekana
Data huhamishwa wakati kinachoonekana kinaundwa
Data hutolewa wakati wa usajili
Inahitaji mantiki ya ziada ili kujiondoa
Thread inaisha yenyewe
Hutumia uhusiano wa mtu mmoja hadi wengi
Hutumia uhusiano wa mtu na mtu
Usajili wote una maana sawa
Usajili unajitegemea
Data inaweza kupotea ikiwa huna usajili
Hutoa tena thamani zote za mtiririko kwa usajili mpya
Ili kutoa mlinganisho, ningefikiria mkondo moto kama sinema katika ukumbi wa michezo. Kwa wakati gani ulifika, kutoka wakati huo ulianza kutazama. Ningelinganisha mtiririko wa baridi na simu katika teknolojia. msaada. Mpigaji simu yeyote husikiliza rekodi ya barua ya sauti kutoka mwanzo hadi mwisho, lakini unaweza kukata simu kwa kujiondoa.
Ningependa kutambua kuwa pia kuna kinachojulikana mtiririko wa joto (nimekutana na ufafanuzi huu mara chache sana na tu katika jamii za kigeni) - huu ni mtiririko ambao hubadilika kutoka kwa mtiririko wa baridi hadi moto. Swali linatokea - wapi kutumia)) Nitatoa mfano kutoka kwa mazoezi.
Ninafanya kazi na Angular. Anatumia kikamilifu rxjs. Ili kupokea data kwa seva, ninatarajia uzi baridi na nitumie uzi huu kwenye kiolezo kwa kutumia asyncPipe. Ikiwa ninatumia bomba hili mara kadhaa, basi, kurudi kwenye ufafanuzi wa mkondo wa baridi, kila bomba itaomba data kutoka kwa seva, ambayo ni ya ajabu kusema kidogo. Na ikiwa nitabadilisha mkondo wa baridi kuwa wa joto, basi ombi litatokea mara moja.
Kwa ujumla, kuelewa aina ya mtiririko ni ngumu sana kwa Kompyuta, lakini ni muhimu.
Operators
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Waendeshaji hutupatia uwezo wa kupanua uwezo wetu wa kufanya kazi na mitiririko. Wanasaidia kudhibiti matukio yanayotokea katika Inaonekana. Tutaangalia michache maarufu zaidi, na maelezo zaidi kuhusu waendeshaji yanaweza kupatikana kwa kutumia viungo katika habari muhimu.
Waendeshaji - wa
Wacha tuanze na mwendeshaji msaidizi wa. Inaunda Inayoonekana kulingana na thamani rahisi.
Waendeshaji - chujio
Opereta ya kichujio, kama jina linavyopendekeza, huchuja mawimbi ya mtiririko. Ikiwa opereta atarudi kweli, itaruka zaidi.
Waendeshaji - kuchukua
kuchukua - Inachukua thamani ya idadi ya emitters, baada ya hapo thread inaisha.
Waendeshaji - debounceTime
debounceTime - hutupa thamani zilizotolewa ambazo ziko ndani ya muda uliowekwa kati ya matokeo - baada ya muda kupita, hutoa thamani ya mwisho.
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)
);
Waendeshaji - takeWhile
Hutoa thamani hadi takeWhile inarejesha sivyo, baada ya hapo inajiondoa kwenye mazungumzo.
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 )
);
Waendeshaji - kuchanganya Karibuni
Opereta ya combineLatest inafanana kwa kiasi fulani na promise.all. Inachanganya nyuzi nyingi kuwa moja. Baada ya kila uzi kutoa angalau utoaji mmoja, tunapata maadili ya hivi punde kutoka kwa kila mmoja katika mfumo wa safu. Zaidi ya hayo, baada ya utoaji wowote kutoka kwa mitiririko iliyounganishwa, itatoa maadili mapya.
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));
Waendeshaji - zip
Zip - Husubiri thamani kutoka kwa kila thread na kuunda safu kulingana na thamani hizi. Ikiwa thamani haitoki kwenye thread yoyote, basi kikundi hakitaundwa.
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));
Waendeshaji - forkJoin
forkJoin pia huunganisha nyuzi, lakini hutoa tu thamani wakati nyuzi zote zimekamilika.
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);
Waendeshaji - ramani
Opereta wa kubadilisha ramani hubadilisha thamani ya emitter kuwa mpya.
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)
);
Waendeshaji - shiriki, gonga
Opereta ya bomba inakuwezesha kufanya madhara, yaani, vitendo vyovyote ambavyo haviathiri mlolongo.
Opereta wa matumizi ya kushiriki anaweza kugeuza mkondo baridi kuwa moto.
Tumemalizana na waendeshaji. Tuendelee na Mada.
Kufikiri kwa sauti
Na kisha nikaenda kunywa chai. Nimechoka na mifano hii π
Familia ya somo
Familia ya somo ni mfano mkuu wa mtiririko wa joto. Madarasa haya ni aina ya mseto ambayo hufanya kazi kwa wakati mmoja kama inavyoonekana na mwangalizi. Kwa kuwa somo ni nyuzi moto, ni muhimu kujiondoa kutoka kwake. Ikiwa tunazungumza juu ya njia kuu, basi hizi ni:
- ijayo - uhamisho wa data mpya kwenye mkondo
- kosa - kosa na kusitisha thread
- kukamilika - kukamilika kwa thread
- jiandikishe - jiandikishe kwa mtiririko
- jiondoe - jiondoe kutoka kwa mtiririko
- inavyoonekana - badilisha kuwa mwangalizi
- kuahidi - inabadilika kuwa ahadi
Kuna aina 4 5 za masomo.
Kufikiri kwa sauti
Kulikuwa na watu 4 wakizungumza kwenye mkondo huo, lakini ikawa kwamba waliongeza mmoja zaidi. Kama wanasema, ishi na ujifunze.
Somo Rahisi new Subject()- aina rahisi zaidi ya masomo. Imeundwa bila vigezo. Hutuma thamani zinazopokelewa tu baada ya usajili.
Mada ya Tabia new BehaviorSubject( defaultData<T> ) - kwa maoni yangu, aina ya kawaida ya somo. Ingizo huchukua thamani chaguo-msingi. Huhifadhi kila wakati data ya toleo la mwisho, ambalo hupitishwa wakati wa kujiandikisha. Darasa hili pia lina njia ya thamani muhimu, ambayo inarudisha thamani ya sasa ya mtiririko.
Cheza tena Mada new ReplaySubject(bufferSize?: number, windowTime?: number) - Ingizo linaweza kuchukua kwa hiari kama hoja ya kwanza saizi ya bafa ya maadili ambayo itahifadhi yenyewe, na kama pili wakati ambao tunahitaji mabadiliko.
AsyncSubject new AsyncSubject() - hakuna kinachotokea wakati wa kujiandikisha, na thamani itarejeshwa tu ikiwa imekamilika. Ni thamani ya mwisho pekee ya mtiririko itarejeshwa.
Kichwa cha WebSocket new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Nyaraka ziko kimya juu yake na ninamwona kwa mara ya kwanza. Ikiwa kuna mtu anajua anachofanya, tafadhali andika na tutaongeza.
Phew. Kweli, tumeshughulikia kila kitu nilichotaka kukuambia leo. Natumai habari hii ilikuwa muhimu. Unaweza kusoma orodha ya marejeleo mwenyewe kwenye kichupo cha habari muhimu.
habari na manufaa
Chanzo: mapenzi.com