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.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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?

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

1) Weli waxba ma dhacayaan. Qalabka biraawsarku wuu cad yahay, xidhmada wicitaanku waa faaruq.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

2) Kadibna amarka console.log('Hi') ayaa lagu daraa xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

3) Oo la oofiyo

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

4) Kadib console.log ('Hi') ayaa laga saarayaa xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

5) Hadda u gudub amarka setTimeout (function cb1 () {… }). Waxaa lagu daraa xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

6) Amarka setTimeout (function cb1() {…}) waa la fuliyaa. Barowsarku waxa uu abuuraa saacada ka tirsan API Webka. Waxay sameyn doontaa tirinta.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

7) Taliskii setTimeout (function cb1() {...}) wuu dhameeyay shaqadiisa waxaana laga saaray xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

8) Command console.log ('Bye') ayaa lagu daraa xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

9) Amarka console.log('Bye') waa lafuliyaa.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

10) Amarka console.log('Bye') ayaa laga saaray xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

12) Wareegga dhacdada wuxuu ka qaataa shaqada cb1 safka soo celinta oo wuxuu dul dhigayaa xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

13) Shaqada cb1 waa la fuliyay oo waxay ku dartay console.log('cb1') xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

14) Amarka console.log('cb1') waa lafuliyaa.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

15) Amarka console.log('cb1') waa laga saaray xirmada wicitaanka.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

16) Shaqada cb1 waa laga saaray xirmada wicitaanka.

Aynu eegno tusaale xagga dhaqdhaqaaqa:

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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);
});

  • Silsilad ballan-qaad ah ayaa soo muuqday, kuwaas oo wanaajiyay akhrinta koodka
  • 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 Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Barnaamijyada falcelintaβ€Šwaa barmaamij barnaamij diiradda saaraya socodka xogta iyo faafinta isbeddelka. Aynu si qoto dheer u eegno waxa ay tahay qulqulka xogta.

// ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ссылку Π½Π° элСмСнт
const input = ducument.querySelector('input');

const eventsArray = [];

// ΠŸΡƒΡˆΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ событиС Π² массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

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.

Qulqulka xogta

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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:

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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

Wuxuu adeegsadaa xiriir hal-ilaa-badan ah
Adeegsada xidhiidh mid-ka-mid ah

Dhammaan isdiiwaangelinta waxay leeyihiin macno isku mid ah
Diiwaangelintu waa madax bannaan

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.

Guud ahaan, fahamka nooca socodka aad ayey ugu adag tahay bilowgayaasha, laakiin waa muhiim.

wadayaasha

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.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenada - filter

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenka shaandhada, sida magacu tilmaamayo, waxa uu shaandheeyaa signalka qulqulka. Haddii hawlwadeenku uu soo noqdo run, wuu sii boodayaa.

Hawl-wadeenada - qaado

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Qaado - Waxay qaadataa qiimaha tirada hawada sare, ka dib markaa duntu dhammaato.

Hawl-wadeenada - debounceTime

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

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)
);  

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeennada - waxay qaataan Inta lagu jiro

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Waxay soo saartaa qiyamka ilaa qaadashada ay soo noqoto been, ka dib waxay ka baxaysaa dunta.

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 )
);  

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenada - isku darka ugu dambeeyay

Isku-darka hawlwadeenka ugu dambeeyay waxa uu la mid yahay ballan-qaad.all. Waxay isku daraysaa dun badan oo mid ah. Ka dib markii dun kasta ay sameyso ugu yaraan hal qiiqa, waxaan ka helnaa qiyamkii ugu dambeeyay mid kasta oo qaab ah. Intaa waxaa dheer, ka dib wax kasta oo qiiqa ka yimaada durdurrada la isku daray, waxay bixin doontaa qiyam cusub.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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));

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenada - zip

Zip - Waxay sugtaa qiyamka dun kasta oo waxay samaysaa habayn ku salaysan qiyamkan. Haddii qiimuhu aanu ka iman dunta, markaas kooxda lama samayn doono.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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));

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenada - forkJoin

forkJoin sidoo kale waxay ku biirtaa dunta, laakiin kaliya waxay soo saartaa qiime marka dhammaan duntu dhammaato.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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);

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeenada - khariidad

Hawl-wadeenka beddelka khariidadda waxa uu u beddelaa qiimaha soo-saarka mid cusub.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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)
);

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

Hawl-wadeennada – wadaag, taabo

Xiriiriyaha tuubada wuxuu kuu ogolaanayaa inaad sameyso saameynaha, taas oo ah, ficil kasta oo aan saameyn ku yeelan habka.

Hawl wadeenka tamarta saamigu wuxuu u rogi karaa qulqul qabow mid kulul.

Barnaamijyada Asynchronous ee JavaScript (Dib u soo yeedhid, Ballanqaad, RxJs)

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.

macluumaad waxtar leh

Source: www.habr.com

Add a comment