ProHoster > ΠΠ»ΠΎΠ³ > Maamulka > Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)
Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)
Salaamu caleykum Sergey Omelnitsky ayaa la xiriira. Muddo aan fogayn waxaan marti galiyay qulqulka barnaamijka falcelinta, halkaas oo aan kaga hadlay asynchrony JavaScript. Maanta waxaan jeclaan lahaa inaan wax ka qoro walxahan.
Laakiin ka hor intaanan bilaabin walxaha ugu muhiimsan, waxaan u baahanahay inaan sameyno qoraal hordhac ah. Haddaba aan ku bilowno qeexitaanno: waa maxay xirmo iyo saf?
Is dulsaar waa ururin walxaheeda lagu helay saldhigga ugu dambeeya, ugu horreeya ee LIFO
Safka waa ururin kuwaas oo curiyayaasha lagu helay ku salaysan FIFO hore-in, hore-out ah
Hagaag, aan sii wadno.
JavaScript waa luuqad barnaamijeed hal-string ah. Taas macneheedu waxa weeye in uu jiro hal dun oo kaliya oo la fulinayo iyo hal xidhmo oo hawluhu saf ugu jiraan fulinta. Sidaa darteed, JavaScript waxay samayn kartaa hal qalliin markiiba, halka hawlgallada kale ay sugi doonaan markooda xirmada ilaa laga soo wacayo.
xirmo wac waa qaab dhismeed xogeed, si fudud loo dhigo, kaydiya macluumaadka ku saabsan goobta barnaamijka aan joogno. Haddii aan u gudubno shaqo, waxaan ku riixeynaa gelitaankeeda xagga sare ee xirmada. Markaan shaqada ka soo laabano, waxaan ka soo daadineynaa qaybta ugu sareysa ee xirmada waxaanan dib ugu laabaneynaa meeshii aan ugu yeernay shaqada. Tani waa waxa raasamaalku uu samayn karo. Oo hadda su'aal aad u xiiso badan. Sidee markaa asynchrony uga shaqeysaa JavasScript?
Dhab ahaantii, marka lagu daro xirmada, daalacayaashu waxay leeyihiin saf gaar ah oo ay kula shaqeeyaan waxa loogu yeero WebAPI. Hawlaha safka ku jira waxa loo fulin doonaa si ay u kala horreeyaan oo keliya ka dib marka xidhmada la nadiifiyo. Kaliya markaas ka dib ayaa laga soo riixayaa safka oo la saarayaa xirmada si loo fuliyo. Haddii ay jiraan ugu yaraan hal shay oo ku jira xidhmada wakhtigan, markaa laguma dari karo xidhmada. Si sax ah waa tan sababta oo ah wicitaanka wicitaanka waqti-ku-gudbinta inta badan maaha mid sax ah waqtiga, maadaama shaqadu aysan ka heli karin safka ilaa xirmada inta ay buuxsan tahay.
Aynu eegno tusaalahan soo socda oo aynu ku bilowno fulintiisa tallaabo-tallaabo. Aynu sidoo kale aragno waxa ka dhacaya nidaamka.
8) Command console.log ('Bye') ayaa lagu daraa xirmada wicitaanka.
9) Amarka console.log('Bye') waa lafuliyaa.
10) Amarka console.log('Bye') ayaa laga saaray xirmada wicitaanka.
11) Ka dib markii ugu yaraan 5000 ms ay dhaafto, saacaduhu wuu joojinayaa oo wuxuu dhigayaa dib u yeerida cb1 ee safka dib u yeerista.
12) Wareegga dhacdada wuxuu ka qaataa shaqada cb1 safka soo celinta oo wuxuu dul dhigayaa xirmada wicitaanka.
13) Shaqada cb1 waa la fuliyay oo waxay ku dartay console.log('cb1') xirmada wicitaanka.
14) Amarka console.log('cb1') waa lafuliyaa.
15) Amarka console.log('cb1') waa laga saaray xirmada wicitaanka.
16) Shaqada cb1 waa laga saaray xirmada wicitaanka.
Aynu eegno tusaale xagga dhaqdhaqaaqa:
Hagaag, waxaan eegnay sida asynchrony loogu hirgeliyay JavaScript. Hadda aan si kooban uga hadalno horumarka koodka asynchronous.
Kobcinta koodka 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);
})
})
})
})
})
});
Barnaamijyada Asynchronous sida aynu ku naqaan JavaScript waxa kaliya oo lagu fulin karaa hawlo. Waxa loo gudbin karaa sida doorsoome kasta oo kale hawlo kale. Tani waa sida dib-u-celinta u dhalatay. Oo waa qabow, madadaalo iyo ciyaar, ilaa ay isu beddesho murugo, murugo iyo murugo. Waa maxay sababtu? Way fududahay:
Maaddaama kakanaanta koodhka ay korodho, mashruucu wuxuu si dhakhso ah u noqdaa mid aan qarsoonayn, oo si isdaba joog ah loo dhejiyay - "callback hell".
Xakamaynta khaladku waxay noqon kartaa mid fudud in la seego.
Ma soo celin kartid tibaaxaha soo noqoshada.
Markii Ballanqaadku yimid, xaaladdu way yara roonaatay.
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);
});
Hab gaar ah oo lagu qabto khaladaadka ayaa soo muuqday
Waxaa lagu daray suurtagalnimada fulinta isbarbar socda iyadoo la adeegsanayo Promise.all
Waxaan ku xallin karnaa asynchrony buul leh anagoo adeegsanayna async/sugi
Laakiin ballanqaadyadu waxay leeyihiin xaddidaaddooda. Tusaale ahaan, ballan lama tirtiri karo iyada oo aan daf lagu dheel dheel, waxa ugu muhiimsana waa in uu ku shaqeeyo hal qiimo.
Hagaag, waxaan si habsami leh u wajahnay barnaamij-samaynta falcelinta. Daalay? Hagaag, nasiib wanaag, waad tagi kartaa inaad soo kariso shaah, ka fikir oo u soo noqo si aad wax badan u akhrido. Waana sii wadi doonaa.
Barnaamijyada falcelintaβwaa barmaamij barnaamij diiradda saaraya socodka xogta iyo faafinta isbeddelka. Aynu si qoto dheer u eegno waxa ay tahay qulqulka xogta.
Aan qiyaasno in aan haysano goob wax lagu soo shubo. Waxaanu abuuraynaa hannaan iyo furayaal kasta oo dhacdada gelinta ah waxaanu ku kaydin doonaa dhacdada shaxdayada. Isla mar ahaantaana, waxaan jeclaan lahaa in aan ogaado in shaxdeenna ay ku kala soocaan waqtiga, i.e. tusaha dhacdooyinka dambe ayaa ka weyn tilmaanta kuwii hore. Diyaarinta noocan oo kale ah waa qaab la fududeeyay ee socodka xogta, laakiin wali ma aha socodka. Si shaxankaan si badbaado leh loogu yeero durdur, waa inay awood u yeelataa inay si uun ugu wargeliso macaamiisha in xog cusubi ay soo gashay. Sidaa darteed waxaan ku nimid qeexida socodka.
Socodkaβwaa xog kala duwan oo waqti lagu kala soocay taasoo muujin karta in xogtu is beddeshay. Hadda qiyaas sida ay ugu habboon tahay in la qoro koodka kaas oo hal fal uu u baahan yahay in la waco dhowr dhacdo oo qaybo kala duwan oo code ah. Si fudud ayaanu u rukhsaynaynaa qulqulka waxayna nagu soo wargelin doontaa marka isbedelku dhaco. Maktabada RxJs way samayn kartaa tan.
RxJS waa maktabad loogu talagalay la shaqaynta asynchronous iyo barnaamijyada dhacdooyinka ku salaysan iyadoo la isticmaalayo taxane la arki karo. Maktabadu waxay bixisaa nooc aasaasi ah La arki karo, dhowr nooc oo caawimo ah (Kormeere, Jadwaleeyayaal, Mawduucyo) iyo hawlwadeenada la shaqaynta dhacdooyinka sida ururinta (khariidad, shaandheyn, dhimi, mid kasta iyo kuwa la mid ah oo ka socda JavaScript Array).
Aynu fahamno fikradaha aasaasiga ah ee maktabaddan.
La fiirsado, Kormeere, Soo saare
La arki karo waa nooca aasaasiga ah ee ugu horreeya ee aan eegi doono. Fasalkani wuxuu ka kooban yahay qaybta ugu muhiimsan ee hirgelinta RxJs. Waxay la xiriirtaa qulqulka la arki karo, kaas oo lagu qori karo iyadoo la adeegsanayo habka rukunka.
La arki karo waxa ay fulisaa habka caawiye ee abuurista cusbooneysiinta, waxa loogu yeero Observer. Isha qiyamka ee Kormeeraha ayaa loo yaqaan soosaare. Tani waxay noqon kartaa habayn, dib-u-eegis, socket web, nooc dhacdo, iwm. Markaa waxaynu odhan karnaa waxa la arkayaa waa kirishbooye u dhexeeya Soosaaraha iyo Kormeeraha.
La arki karo ayaa qabta saddex nooc oo ah dhacdooyinka Kormeeraha:
xiga - xog cusub
qalad - khalad haddii isku xigxiga uu dhammaaday marka laga reebo. Dhacdadani waxay sidoo kale tilmaamaysaa dhamaystirka taxanaha.
dhamaystiran - calaamad ku saabsan dhamaystirka taxanaha. Tani waxay ka dhigan tahay in aysan jiri doonin xog cusub.
Aan aragno demo:
Bilowga waxaan ka baaraandegi doonaa qiyamka 1, 2, 3, iyo ka dib 1 ilbiriqsi. waxaan heli doonaa 4 oo dhameyn doonaa qulqulkayaga.
Si qaylo leh u fekeraya
Kadibna waxaan gartay in sheegisteeda ay ka xiiso badnayd wax ka qorista. π
Times
Marka aan iska diiwaan geliyo qulqulka waxaan abuurnaa fasal cusub rukumotaas oo ina siinaysa awood aan kaga bixi karno anaga oo adeegsanayna habka Unsubscribe. Waxa kale oo aanu kooxayn karnaa is-diiwaangelinta anagoo adeegsanayna habka ku dar. Hagaag, waa macquul inaan kala furfuri karno dunta anagoo adeegsanayna ka saar. Hababka ku daridda iyo ka saarida waxay aqbalaan isdiiwaangelinta kale sida gelinta. Waxaan jeclaan lahaa in aan xuso in marka aan ka baxno, aan ka saarno dhammaan diiwaanka carruurta sida haddii ay u yeereen habka ka bixida. Horey u soco
Noocyada durdurrada
HOT
COL
Soo saaraha waxaa loo abuuray meel ka baxsan la arki karo
Soo saaraha waxa lagu abuuray gudaha la arki karo
Xogta waxa la wareejiyaa wakhtiga la arki karo
Xogta waxa la bixiyaa wakhtiga is-diiwaangelinta
Waxaad u baahan tahay caqli-gal dheeraad ah oo ku saabsan iska-diiwaangelinta
Dulku iskii buu u baxaa
Xogta waa la lumin karaa haddii aadan haysan rukun
Waxay dib u soo saartaa dhammaan qiyamka qulqulka ee isdiiwaangelinta cusub
Si aan tusaale ahaan u bixiyo, waxaan u malayn lahaa qulqulka kulul sidii filim masraxa ku jira. Waqtigee ayaad timid, laga bilaabo markaas waxaad bilowday inaad daawato. Waxaan is barbar dhigi lahaa socodka qabow iyo wacitaanka tignoolajiyada. taageero. Qof kasta oo soo wacay wuxuu dhegeysanayaa duubista fariimaha codka bilawga ilaa dhammaadka, laakiin waad xidhi kartaa adigoo isticmaalaya is-diiwaangelinta.
Waxaan jeclaan lahaa in aan ogaado in ay jiraan sidoo kale waxa loogu yeero qulqulka diirran (waxaan la kulmay qeexitaan noocaas ah si aad u yar oo kaliya oo kaliya beelaha ajnabiga ah) - tani waa qulqulka ka soo baxa qulqulka qabow una beddelo mid kulul. Su'aashu waxay soo baxdaa - halkee laga isticmaali karaa)) Waxaan ku siin doonaa tusaale ka mid ah dhaqanka.
Waxaan la shaqeeyaa Angular. Wuxuu si firfircoon u isticmaalaa rxjs. Si loo helo xogta server-ka, waxaan filayaa dun qabow oo isticmaal duntan ku jirta templateka adigoo isticmaalaya asyncPipe. Haddii aan isticmaalo tuubadan dhowr jeer, ka dibna, ku soo noqoshada qeexida qulqulka qabow, tuubo kasta waxay codsan doontaa xogta server-ka, taas oo ah wax la yaab leh in la yiraahdo ugu yaraan. Oo haddii aan u beddelo durdur qabow mid diiran, markaas codsigu wuxuu dhacayaa hal mar.
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);
Hawl-wadeennadu waxay na siinayaan awoodda aan ku ballaarin karno awoodda aan kula shaqeyneyno durdurrada. Waxay gacan ka geystaan ββxakameynta dhacdooyinka ka dhacaya Goobjoogaha. Waxaan eegi doonaa labo ka mid ah kuwa ugu caansan, iyo faahfaahin dheeraad ah oo ku saabsan hawlwadeenada waxaa laga heli karaa iyada oo la adeegsanayo isku xirka macluumaadka waxtarka leh.
Hawl-wadeennada - ee
Aan ku bilowno hawlwadeenka kaaliyaha ee. Waxay abuurtaa la arki karo oo ku salaysan qiime fudud.
debounceTime - waxay tuuraysaa qiyamka la sii daayay ee ku dhaca muddada la cayimay ee u dhexeeya wax soo saarka - ka dib marka muddada u dhaxaysaa ay dhaafto, waxay soo saartaa qiimaha ugu dambeeya.
Zip - Waxay sugtaa qiyamka dun kasta oo waxay samaysaa habayn ku salaysan qiyamkan. Haddii qiimuhu aanu ka iman dunta, markaas kooxda lama samayn doono.
Waanu dhammaysannay hawl-wadeennada. Aan u gudubno mawduuca.
Si qaylo leh u fekeraya
Ka dibna waxaan u aaday inaan cabbo shaah. Tusaalooyinkan waan ka daalay π
Qoyska mawduuca
Qoyska mawduuca ayaa ah tusaalaha ugu muhiimsan ee qulqulka kulul. Fasalladani waa nooc isku-dhafan oo isku mar u dhaqma sidii la arki karo iyo goobjooge. Maadaama mawduucu yahay dun kulul, waa lagama maarmaan in laga saaro. Haddii aan ka hadalno hababka ugu muhiimsan, markaa kuwan waa:
xiga - u wareejinta xogta cusub ee qulqulka
qalad - qalad iyo joojinta dunta
dhamaystiran - dhamaystirka dunta
rukunka - rukunka rukunka
iska-diiwaangeli - ka bixi qulqulka
sida la arki karo - u beddelo goobjooge
Ballan qaad - waxay isu beddeshaa ballan
Waxaa jira 4 5 nooc oo maadooyin ah.
Si qaylo leh u fekeraya
Waxaa durdurka ka hadlay 4 qof, laakiin waxaa soo baxday in ay mid kale ku dareen. Sida ay yiraahdaan, noolow oo baro.
Mawduuc Fudud new Subject()- nooca ugu fudud ee maadooyinka. Abuur aan xuduud lahayn. Gudbiya qiyamka la helay oo kaliya ka dib isdiiwaangelinta
Mawduuca Dhaqanka new BehaviorSubject( defaultData<T> ) - Fikradayda, nooca ugu badan ee mawduuca. Gelintu waxay qaadataa qiimaha caadiga ah. Had iyo jeer kaydiyaa xogta arrinta u dambaysa, taas oo la kala qaado marka la is-diiwaangelinayo. Fasalkani waxa kale oo uu leeyahay habka qiimaha waxtarka leh, kaas oo soo celinaya qiimaha hadda ee qulqulka.
Mawduuca ku celiska ah new ReplaySubject(bufferSize?: number, windowTime?: number) - Gelintu waxay si ikhtiyaari ah u qaadan kartaa doodda koowaad ee cabbirka qiyamka ay ku kaydin doonto lafteeda, iyo marka labaad marka aan u baahanahay isbeddello.
AsyncMawduuca new AsyncSubject() - ma jiraan wax dhacaya marka la is-diiwaangelinayo, oo qiimihiisu kaliya waxaa la soo celin doonaa marka la dhamaystiro. Kaliya qiimaha ugu dambeeya ee qulqulka ayaa la soo celin doonaa.
Maadada WebSocket new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Dukumeentigu waa ka aamusan yahay isaga, waana arkayaa isaga markii ugu horeysay. Haddii qof uu garanayo waxa uu sameeyo, fadlan qor annaguna waanu ku dari doonaa.
Phew. Hagaag, waxaan daboolnay wax kasta oo aan rabay inaan kuu sheego maanta. Waxaan rajeynayaa in macluumaadkani uu ahaa mid faa'iido leh. Waxaad ka akhrisan kartaa liiska tixraacyada laftaadu tab macluumaadka waxtarka leh.