Asünkroonne programmeerimine JavaScriptis. (Callback, Promise, RxJs)

Tere kõigile. Siin on Omelnicki Sergei. Hiljuti viis ma läbi voogesituse reaktiivse programmeerimise teemal, kus rääkisin asünkroonsusest JavaScriptis. Täna sooviksin selle materjali kokku võtta.

Aga enne, kui alustame põhiteemat, peame tegema sissejuhatuse. Niisiis, alustame definitsioonidest: mis on virn ja järjekord?
Virn — see on kollektsioon, mille elemendid saadakse "viimane sisse, esimene välja" LIFO põhimõttel.
Järjekord — see on kollektsioon, mille elemendid saadakse "esimene sisse, esimene välja" FIFO põhimõttel.

Okei, jätkame.

JavaScript on ühesuunaline programmeerimiskeel. See tähendab, et sellel on ainult üks täitmisprotsess ja üks virn, kuhu funktsioonid jäetakse täitmiseks ootele. Seega võib JavaScript korraga sooritada ainult ühe operatsiooni, teised operatsioonid ootavad oma järjekorda virnas, kuni neid kutsutakse.

Kutsumisvirn — see on andme struktuur, mis lihtsustatult öeldes salvestab teavet programmikohtade kohta, kus me asume. Kui me läheme funktsiooni, paneme selle kohta kirje virna tippu. Kui me funktsioonist tagasi tuleme, tõmbame virnast välja kõige ülemise elemendi ja leiame end sealt, kust seda funktsiooni kutsuti. See on kõik, mida virn oskab. Ja nüüd on väga huvitav küsimus. Kuidas siis toimib asünkroonsus JavaScriptis?

Tegelikult on lisaks virnale brauserites eriline järjekord, mis tegeleb nii nimetatud WebAPI-ga. Selle järjekorra funktsioonid täidetakse järjestikku ainult pärast seda, kui virn on täielikult tühi. Alles siis paigutatakse need järjekorrast virna täitmiseks. Kui virnas on hetkel vähemalt üks element, ei saa nad virna sattuda. Just sellepärast on ajavahemiku järgi kutse sageli ajaliselt ebatäpne, kuna funktsioon ei saa minna järjekorrast virna, kuni see on täis.

Vaatame järgmist näidet ja teeme selle samm-sammult 'täitmise'. Samuti vaatame, mis sel ajal süsteemis toimub.

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

1) Praegu ei toimu midagi. Brauseri konsool on tühi, kutse virn on tühi.

2) Siis lisatakse käsk console.log(‘Hi’) kutse virna.

3) Ja see täidetakse.

4) Siis eemaldatakse console.log(‘Hi’) kutse virnast.

5) Nüüd liigume käsu setTimeout(function cb1() {… }). juurde. See lisatakse kutse virna.

6) Käsk setTimeout(function cb1() {… }) täidetakse. Brauser loob ajastuse, mis on osa Web API-st. See hakkab aega maha arvestama.

7) Käsk setTimeout(function cb1() {… }) on lõpetanud oma töö ja eemaldatakse kutse virnast.

8) Käsk console.log(‘Bye’) lisatakse kutse virna.

9) Käsk console.log(‘Bye’) täidetakse.

10) Käsk console.log(‘Bye’) eemaldatakse kutse virnast.

11) Pärast seda, kui on möödunud vähemalt 5000 ms., lõpetab ajastamine töö ja paneb tagaside cb1 tagasi tagaside järjekorda.

12) Ürituste tsükkel võtab funktsiooni cb1 tagaside järjekorrast ja paneb selle kutse virna.

13) Funktsioon cb1 täidetakse ja lisab console.log(‘cb1’) kutse virna.

14) Käsk console.log(‘cb1’) täidetakse.

15) Käsk console.log(‘cb1’) eemaldatakse kutse virnast.

16) Funktsioon cb1 eemaldatakse kutse virnast.

Vaadakem dünaamikat näite näitel:

Nii oleme arutanud, kuidas JavaScriptis asünkroonsust rakendatakse. Nüüd räägime lühidalt asünkroonse koodi arengust.

Asünkroonse koodi areng.

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

Asünkroonset programmeerimist, nagu me seda JavaScriptis tunneme, saab rakendada ainult funktsioonide kaudu. Neid saab edastada teistele funktsioonidele nagu mistahes teised muutujad. Nii said alguse tagasihelbid. See on lahe, lõbus ja toretsev, kuni see muutub kurvaks ja masendavaks. Miks? Kõik on lihtne:

• Koodi keerukuse kasvuga muutub projekt kiiresti arusaamatuks sügavalt pesitsevateks plokkideks — „tagasikutsumise põrgu“.
• Vead võib kergesti tähelepanuta jätta.
• Väljendeid ei saa returni kaudu tagasi anda.

Promise'i saabumisega muutus olukord veidi paremaks.

uus Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('SIIN EBAUS');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('viga: ', e);
});

• Aktiivne Promise'a ahel täiendab koodi arusaadavust
• Sisse tuli eraldi veateate käsitsemise meetod
• Ilmus võimalus paralleelseks täitmiseks Promise.all abil
• Süvenenud asünkroonsust saame lahendada async/await abil

Kuid Promise'il on oma piirangud. Näiteks ei saa seda tantsimata tühistada ja mis kõige tähtsam, see töötab ühe väärtusega.

Nüüd oleme sujuvalt jõudnud reaktiivse programmeerimise juurde. Kas oled väsinud? Kuid õnneks saad minna teed tegema, mõtle ja naase edasi lugema. Mina jätkan.

Reaktiivne programmeerimine — programmimise paradigma, mis on suunatud andmevoogudele ja muudatuste levikule. Vaatame lähemalt, mis on andmevoog.

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

Kujutage ette, et meil on sisestusala. Loome massiivi ja iga keyup sündmuse puhul salvestame sündmuse meie massiivi. Oluline on märkida, et meie massiiv on järjestatud aja põhjal, s.t. hilisemate sündmuste indeks on suurem kui varasemate indeks. Selline massiiv esindab lihtsustatud andmevoogu, kuid see ei ole veel voog. Selle massiivi rahuldavaks nimetamiseks vooguks peab see suutma mingil viisil teavitada tellijaid, et sellesse on lisandunud uusi andmeid. Nii jõuame voogude määratlemise juurde.

Andmevoog

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

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

Voogon aja järgi järjestatud andmemassiiv, mis suudab teavitada, et andmed on muutunud. Kujutage nüüd ette, kui mugav on kirjutada koodi, kus ühe tegevuse jaoks tuleb kutsuda mitmeid sündmusi erinevates koodilõikudes. Lihtsalt tellime voogu ja see teavitab meid iseseisvalt, kui muudatused toimuvad. Seda oskab teha RxJs raamatukogu.

RxJS — on asünkroonsete ja sündmustel põhinevate programmide töötamiseks mõeldud teek, mis kasutab jälgitavaid järjestusi. Teek pakub põhiliiki Observable, mitu abiliiki (Observer, Schedulers, Subjects) ja sündmustega töötamise operaatorid, nagu kollektsioonid (map, filter, reduce, every ja sarnased JavaScripti massiivist).

Vaatame selle teegi põhikontseptsioone.

Observable, Observer, Producer

Observable — esimene põhitüüp, mida käsitleme. See klass sisaldab RxJs-i peamist rakenduse osa. See on seotud jälgitava vooga, millele saab tellida, kasutades meetodit subscribe.

Observable-is on rakendatud abimehhanism värskenduste loomiseks, mida nimetatakse Observer. Väärsuse allikaks Observerile on Producer. See võib olla massiiv, iterator, veebiteenus, mõni sündmus jne. Seega võib öelda, et observable toimib juhina Produceri ja Observeri vahel.

Observable töötleb kolme tüüpi sündmusi Observeri jaoks:

• next – uued andmed
• error – viga, kui järjestus lõpetatakse erandliku olukorra tõttu. See sündmus tähendab samuti järjestuse lõpetamist.
• complete — seeria lõpetamise signaal. See tähendab, et uusi andmeid enam ei tule.

Vaata demot:

Alguses töötleme väärtusi 1, 2, 3, ja pärast 1 sekundi möödumist saame 4 ning lõpetame meie voogu.

Mõtted valjult

Ja siis mõistsin, et rääkida oli huvitavam kui kirjutada sellest. 😀

Tellimus

Kui me teeme tellimuse voole, loome uue klassi subscription, mis annab meile võimaluse tellimus lõpetada meetodi kaudu unsubscribe. Samuti saame tellimusi gruppidesse panna meetodi abil add. Loomulikult saame vooge eemaldada meetodi kaudu remove. Meetodid add ja remove võtavad sisendiks teise tellimuse. Tahan märkida, et kui me tühistame tellimuse, tühistame kõik lapse tellimused nagu oleksime neis meetodi unsubscribe kutsunud. Jätkame.

Vood tüübid

Kui tuua analoogia, siis kujutaksin kuuma voogu nagu filmi kinosaalis. Mis iganes ajahetkel sa sisse astud, sellest hetkest alates hakkad vaatama. Külma voogu võrdleksin helistamisega tehnilisse tugi. Iga helistaja kuuleb salvestust algusest lõpuni, kuid saad lopendada kõne unsubscribe abil.

Tahaksin märkida, et eksisteerivad ka nn soojad vood (sellist määratlust olen kohanud äärmiselt harva ja vaid välismaistes kogukondades) — see on voog, mis muundatakse külmast voost kuumaks. Kuidas seda kasutada? Toona toon näite praktikas.

Ma töötan Angulariga. See kasutab aktiivselt RxJS'i. Andmete saamiseks serverist ootan külma voogu ja kasutan seda šabloonis asyncPipe'i abil. Kui kasutan seda pipe'i mitu korda, siis, naastes külma voo määratlemise juurde, küsib iga pipe andmeid serverist, mis on pehmelt öeldes kummaline. Kui aga muudan külma voo soojaks, toimub päring vaid korra.

Tegelikult on voogude tüüpide mõistmine algajatele üsna keeruline, kuid oluline.

Operaatoreid

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

Asetuse töötlemiseks voogudega võimaldab meile operaatorite kasutamine. Need aitavad juhtida sündmusi, mis voolavad Observable'is. Tutvume mõne populaarse operaatoriga, detailsemalt operaatorite kohta on teavet kasulikku informatsiooni linkides.

Operaatorid — of

Alustame abistava operaatoriga of. See loob Observable'i lihtsast väärtusest.

Operaatorid — filter

Filter operaator filter, nagu nimest järeldada, filtreerib voolu signaali. Kui operaator tagastab tõe, siis lubab edasised signaalid läbi.

Operaatorid — take

take — Võtab arvesse emissioonide arvu, pärast mida voog lõppeb.

Operaatorid — debounceTime

debounceTime — filtreerib välja emissioonid, mis esinevad määratud ajavahemikus, emitades viimase väärtuse pärast ajavahemiku lõppu.

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Emiteerib väärtuse iga 1000ms järel
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Emiteerib väärtuse iga 1500ms järel
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Ootame 700ms, enne kui töötleme väärtuseid
  take(3)
);  

Operaatorid — takeWhile

Emitab väärtusi seni, kuni takeWhile ei tagasta false, pärast mida lõpetab voost.

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Emiteerib väärtuse iga 1000ms järel
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile(producer => producer < 5)
);  

Operaatorid — combineLatest

Kombineeritud operaator combineLatest on sarnane promise.all-iga. See ühendab mitu voogu üheks. Kui iga voog on vähemalt korra väärtuse edastanud, saame viimased väärtused igast voost massiivina. Edasi, peale igat väärtuse edastamist ühendatud voogudest, hakkab see andma uusi väärtusi.

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Edastame väärtuse iga 1000 ms järel
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Edastame väärtuse iga 750 ms järel
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

Operaatorid — zip

Zip — ootab väärtust igast voost ja loob massiivi nende väärtuste põhjal. Kui väärtus ei saabu mõnest voost, siis gruppi ei moodustata.

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 1000ms
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

Operators — forkJoin

forkJoin ühendab vooge, kuid emiteerib väärtuse ainult siis, kui kõik vood on lõpetatud (complete).

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Emiteerime väärtuse iga 1000ms
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Emiteerime väärtuse iga 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Emiteerime väärtuse iga 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

Operators — map

Transformatsiooni operaator map muundab emiteeritava väärtuse uueks.

const { Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Väljastame väärtuse iga 1000 ms tagant
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

Operaatoreid – share, tap

Tap operaator võimaldab teostada külgtoimeid, st mingeid tegevusi, mis ei mõjuta järjestust.

Utilitaarne operaator share suudab külmast voogust teha sooja voolu.

Ooperaatoreid on piisavalt. Liigume Subjecti juurde.

Mõtted valjult

Ja siis läksin teed joogile. Need näited väsitavad mind 😀

Subjectite perekond

Subjectite perekond on selge näide sooja voolu. Need klassid on omamoodi hübriid, mis toimivad samaaegselt nii observable’ina kui observer’ina. Kuna subject on soe vool, tuleb sellest ära tellida. Peamiste meetodite hulka kuuluvad:

• next – edastamine uusi andmeid voolu
• error – viga ja voolu lõpetamine
• complete – voolu lõpetamine
• subscribe – voolule tellimine
• unsubscribe – voolust loobumine
• asObservable – transformeerime observer’iks
• toPromise – transformeerib promiseks

Erinevate subjectite tüüpe on 4-5.

Mõtted valjult

Stream’is rääkisin 4-st, aga selgus, et nad on veel ühe lisanud. Nagu öeldakse, elad ja õpid.

Lihtne Subject new Subject()– ainus lihtsaim subject-tüüp. Luua saab ilma parameetriteta. Edastab väärtusi, mis saabuvad ainult pärast tellimist.

BehaviorSubject new BehaviorSubject(defaultData) – minu arvates kõige levinum subject-tüüp. Võtab sisendina vastu vaikimisi väärtuse. Salvestab alati viimase emit'i andmed, mida ta edastab tellimise ajal. Sellel klassil on ka kasulik meetod value, mis tagastab voogude praeguse väärtuse.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) — Võib esimesena argumentina valida optimaalselt väärtuste puhversuuruse, mida ta endas salvestab, ja teiseks aja, mille jooksul me muudatusi vajame.

AsyncSubject new AsyncSubject() — Tellimise ajal ei juhtu midagi ning väärtus tagastatakse alles siis, kui see on complete. Tagastatakse ainult voogude viimane väärtus.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig | Observable, destination?: Observer) — Selle kohta ei räägi dokumentatsioon ning näen seda esmakordselt. Kes teab, mida see teeb, kirjutage, täiustame.

Uhh. Nüüd oleme käsitlenud kõike, mida tahtsin täna rääkida. Loodan, et see teave oli kasulik. Iseseisvalt saab kirjanduse nimekirjaga tutvuda kasuliku teabe vahekaardil.

Kasulik teave

• https://vk.com/frontend_practice?w=wall-182297870_931 — link voogudele
• https://habr.com/ru/company/ruvds/blog/337042/ — Kuidas JS töötab: mootori, käitamise mehhanismide, kutsumisstacki ülevaade
• https://habr.com/ru/company/ruvds/blog/340508 — Kuidas JS töötab: sündmuste tsükkel, asünkroonsus ja viis viisi koodi parandamiseks async / await abil
• http://vanilla-js.blogspot.com/2014/09/event-loop-javasript.html — Kuidas töötab Event Loop JavaScriptis
• https://tproger.ru/translations/asynchronous-javascript/ — Asünkroonse JavaScripti evolutsioon
• https://habr.com/ru/company/ruvds/blog/341880/ — Mis on RxJS ja miks on seda kasulik teada
• https://medium.com/ngx/practical-use-rxjs-81aaab57045c — RxJS praktiline rakendamine
• https://coursetro.com/posts/code/148/RxJS-Observables-Tutorial—Creating-&-Subscribing-to-Observables — RxJS Observables Tutorial — Creating & Subscribing to Observables
• https://slides.com/zenabsaleem/rxjs-hot-cold-observables#/ — RXJS: kuumad ja külmad observables
• https://clck.ru/FiPgB — Klassid, funktsioonid Observable'i loomiseks. Operaatorid.
• https://www.learnrxjs.io/operators/ — RxJS operaatorid näidise kaudu
• https://rxjs.dev/api — API nimekiri
• https://clck.ru/FkS8Y — Subject'i tüübid ja ajakavad RxJS-is

Allikas: habr.com