Inkqubo engavumelaniyo kwiJavaScript (Callback, Promise, RxJs)

Molweni nonke. USergey Omelnitsky unxibelelana naye. Kungekudala ndibambe umsinga kwiprogram esebenzayo, apho ndathetha nge-asynchrony kwiJavaScript. Namhlanje ndingathanda ukuthatha amanqaku kulo mbandela.

Kodwa ngaphambi kokuba siqalise umbandela oyintloko, kufuneka sibhale inqaku lentshayelelo. Ke masiqale ngeenkcazo: yintoni isitaki kunye nomgca?

Isitaki yingqokelela eneziqalelo zayo ezifunyenwe kwi-LIFO yokugqibela, eyokuqala

Umgceni yingqokelela eneziqalelo ezifunyenwe okokuqala, okokuqala kuphuma i-FIFO

Kulungile, masiqhubeke.

IJavaScript lulwimi lwenkqubo olunomsonto omnye. Oku kuthetha ukuba kukho intambo enye kuphela yophumezo kunye nesitakhi esinye apho imisebenzi ikrolwe khona ukuphunyezwa. Ke ngoko, iJavaScript inokwenza umsebenzi omnye kuphela ngexesha, ngelixa eminye imisebenzi izakulinda ithuba layo kwisitaki de zibizwe.

Fowuna istaki lulwakhiwo lwedatha oluthi, ngokulula, lurekhode ulwazi malunga nendawo kwinkqubo esikuyo. Ukuba sidlulela kumsebenzi, sityhala ukungena kwawo kumphezulu wesitaki. Xa sibuya kumsebenzi, sikhupha eyona nto iphezulu ukusuka kwisitaki kwaye sigqibezele emva apho besibize khona umsebenzi. Yiyo yonke le nto i-stack enokuyenza. Kwaye ngoku umbuzo onomdla kakhulu. Isebenza njani ke iasynchrony kwiJavasScript?

Ngapha koko, ukongeza kwisitaki, izikhangeli zinomgca okhethekileyo wokusebenza nento ebizwa ngokuba yiWebAPI. Imisebenzi kulo mgca iya kwenziwa ngokulandelelana kuphela emva kokuba istaki sisusiwe ngokupheleleyo. Kuphela kusemva koku ezithi zityhalwe ukusuka emgceni zisiwe kwisitaki ukuze zibulawe. Ukuba kukho ubuncinci into enye kwi-stack okwangoku, ayinakongezwa kwisitaki. Kungenxa kanye yoku ukuba imisebenzi yokufowuna ngexesha lokuvala isoloko ingachanekanga ngexesha, kuba umsebenzi awunakusuka emgceni ukuya kwisitaki ngexa sigcwele.

Makhe sijonge lo mzekelo ulandelayo kwaye siqalise ngokuphunyezwa kwayo ngenyathelo ngenyathelo. Masibone kwakhona okwenzekayo kwinkqubo.

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

1) Akukho nto yenzekayo okwangoku. I-console yebrawuza icacile, i-call stack ayinalutho.

2) Emva koko umyalelo console.log('Hi') yongezwa kwisitaki sokufowuna.

3) Kwaye kuzalisekile

4) Emva koko i-console.log('Hi') iyasuswa kwisitaki sokufowuna.

5) Ngoku dlulela kumyalelo setTimeout(function cb1() {… }). Yongezwa kwisitaki sokufowuna.

6) I setTimeout(function cb1() {… }) umyalelo uyaphunyezwa. Isikhangeli senza isibali-xesha esiyinxalenye yeWeb API. Iza kwenza ubalo-phantsi.

7) I setTimeout(function cb1() {... }) umyalelo ugqibile umsebenzi wawo kwaye uyasuswa kwistack call.

8) Umyalelo console.log('Bye') yongezwa kwisitaki sokufowuna.

9) Umyalelo we console.log('Bye') uyenziwa.

10) Umyalelo console.log('Bye') uyasuswa kwisitaki sokufowuna.

11) Emva kokuba ubuncinane be-5000 ms idlulile, isibali-xesha siyayeka kwaye sibeke i-callback cb1 kumgca wokufowuna.

12) I-loop yesiganeko ithatha umsebenzi we-cb1 kumgca wokufowuna kwaye uyibeke kwisitaki sokufowuna.

13) Umsebenzi we-cb1 uyenziwa kwaye wongeza i-console.log('cb1') kwisitaki sokufowuna.

14) Umyalelo console.log('cb1') uyaphunyezwa.

15) Umyalelo console.log('cb1') uyasuswa kwistack yokufowuna.

16) Umsebenzi we-cb1 ususiwe kwi-stack call.

Makhe sijonge umzekelo kwi-dynamics:

Ewe, sijonge indlela iasynchrony ephunyezwa ngayo kwiJavaScript. Ngoku makhe sithethe ngokufutshane malunga nokuvela kwekhowudi ye-asynchronous.

Ukuvela kwekhowudi esynchronous.

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

Udweliso lweAsynchronous njengoko sisazi kwiJavaScript inokuphunyezwa kuphela ngemisebenzi. Zingagqithiswa njengazo naziphi na ezinye iinguqu kweminye imisebenzi. Le yindlela abazalwa ngayo abafowunelwa. Kwaye ipholile, imnandi kwaye idlala, ide iguquke ibe lusizi, i-melancholy kunye nosizi. Ngoba? Ilula:

• Njengoko ukuntsonkotha kwekhowudi kusanda, iprojekthi ijika ngokukhawuleza ibe ziibhloko ezifihliweyo, ezihlala ngokuphindaphindiweyo - "isihogo sokubuyisela".
• Ukuphatha impazamo kunokuba lula ukuyiphosa.
• Awukwazi ukubuyisela iintetho ezinembuyekezo.

Ngokufika kukaSithembiso, imeko yabangcono.

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

• Kwavela amatyathanga esithembiso, aphucula ukufundeka kwekhowudi
• Kuvele indlela eyahlukileyo yokubamba iimpazamo
• Kongezwe ukuba kunokwenzeka ukuphunyezwa okufanayo usebenzisa i-Promise.all
• Sinokusombulula i-asynchrony efakwe kwindlwane sisebenzisa i-async/ait

Kodwa izithembiso zinemida yazo. Ngokomzekelo, isithembiso asinakutshitshiswa ngaphandle kokudansa ngentambula, kwaye okona kubaluleke kakhulu kukuba sisebenza ngexabiso elinye.

Ewe, siye sasondela ngokutyibilikayo kwinkqubo esebenzayo. Ndidiniwe? Ewe, ngethamsanqa, ungaya kwenza iti, ucinge ngayo kwaye ubuye ukuze ufunde ngakumbi. Kwaye ndiya kuqhubeka.

Inkqubo esebenzayo yiparadigm yenkqubo egxile ekuhambeni kwedatha kunye nokutshintsha ukusasazwa. Makhe sijonge ngakumbi ukuba yintoni umsinga wedatha.

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

const eventsArray = [];

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

Makhe sicinge ukuba sinendawo yokufaka. Senza uluhlu kwaye ngalo lonke utshixo lomsitho wegalelo siya kuwugcina umsitho kuluhlu lwethu. Ngexesha elifanayo, ndingathanda ukuqaphela ukuba uluhlu lwethu luhlelwe ngexesha, oko kukuthi. isalathiso seziganeko zamva sikhulu kunesalathiso sezo zangaphambili. Uluhlu olunjalo luyimodeli eyenziwe lula yokuhamba kwedatha, kodwa ayikabikho. Ukuze olu luhlu lubizwe ngokukhuselekileyo ngumjelo, kufuneka lukwazi ngandlela-thile ukwazisa ababhalisi ukuba idatha entsha ifikile kuyo. Ngaloo ndlela siza kwinkcazo yokuhamba.

Umjelo wedatha

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

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

Ukuhamba luludwe lwedatha ehlelwe ngexesha elinokubonisa ukuba idatha itshintshile. Ngoku khawucinge ukuba kulula kangakanani ukubhala ikhowudi apho isenzo esinye sifuna ukubiza iziganeko ezininzi kwiindawo ezahlukeneyo zekhowudi. Sibhalisa ngokulula kumjelo kwaye iya kusazisa xa utshintsho lusenzeka. Kwaye ilayibrari ye-RxJs inokukwenza oku.

RxJS lithala leencwadi lokusebenza kunye neenkqubo ezingahambelaniyo kunye nezesekwe kwimisitho kusetyenziswa ulandelelwano olubonakalayo. Ithala leencwadi libonelela ngodidi olusisiseko Iyaqwalaselwa, iintlobo ezininzi ezincedisayo (Umkhangeli, abacwangcisi, imixholo) kunye nabaqhubi ekusebenzeni ngemisitho njengengqokelela (imephu, hluza, nciphisa, zonke kunye nezinye ezifanayo ezivela kwiJavaScript Array).

Masiqonde imiba esisiseko yeli thala leencwadi.

Okuqaphelekayo, uMjongi, uMvelisi

Okuqaphelekayo luhlobo lokuqala olusisiseko esiza kulujonga. Le klasi iqulethe inxalenye ephambili yokuphunyezwa kwe-RxJs. Idibaniswa nomlambo obonakalayo, onokubhaliswa ekusebenziseni indlela yokubhalisa.

I-Observable iphumeza umncedisi wokwenza uhlaziyo, okubizwa ngokuba Umgcini. Umthombo wamaxabiso woMjongi ubizwa ngokuba producer. Oku kunokuba luluhlu, i-iterator, i-socket yewebhu, uhlobo oluthile lwesiganeko, njl. Ke sinokuthi okuqaphelekayo ngumqhubi phakathi koMvelisi kunye noMjongi.

Okuqaphelekayo kubamba iintlobo ezintathu zemisitho yabaQondisi:

• okulandelayo - idatha entsha
• imposiso – impazamo ukuba ulandelelwano luphelile ngenxa yokukhetha okuthile. esi siganeko sikwathetha ukugqitywa kolandelelwano.
• gqibezela - uphawu malunga nokugqitywa kolandelelwano. Oku kuthetha ukuba akusayi kubakho datha entsha.

Makhe sibone idemo:

Ekuqaleni siya kuqhubekekisa amaxabiso 1, 2, 3, kwaye emva komzuzwana omnye. siya kufumana i-1 kwaye siphelise umsinga wethu.

Ukucinga ngokuvakalayo

Kwaye ke ndaqonda ukuba ukubalisa kwakunomdla ngaphezu kokubhala ngayo. 😀

umrhumo

Xa sibhalisela umlambo senza iklasi entsha ukuthengaesinika ukukwazi ukukhupha ubhaliso usebenzisa indlela ungabhalisi. Sinako kwakhona amaqela imirhumo ngokusebenzisa indlela ukongeza. Ewe, kusengqiqweni ukuba singakwazi ukwahlula amaqela sisebenzisa imisonto ukususa. Iindlela zokudibanisa nokususa zamkele omnye umrhumo njengegalelo. Ndingathanda ukuqaphela ukuba xa sizikhupha, sizikhupha kubo bonke abantwana abarhumayo ngokungathi babize indlela yokungabhalisi. Qhubeka.

Iindidi zemisinga

HOT
YIBANDELA

Umvelisi wenziwa ngaphandle kokubonakala
Umvelisi udalwe ngaphakathi kokubonakalayo

Idatha idluliswa ngexesha elibonakalayo lenziwe
Idatha inikezelwa ngexesha lokubhalisa

Kufuneka ingqiqo eyongezelelweyo yokungabhalisi
Umsonto uphela ngokwawo

Isebenzisa ubudlelwane obunye ukuya kwabaninzi
Usebenzisa ubudlelwane bomntu nomntu

Yonke imirhumo inentsingiselo efanayo
Imirhumo izimele

Idatha ingalahleka ukuba awunayo umrhumo
Iphinda ikhuphe onke amaxabiso osasazo kumrhumo omtsha

Ukunika umzekeliso, bendiya kucinga ngomjelo oshushu njengefilimu kwindawo yeqonga. Ngeliphi ixesha ufikile, ukususela ngaloo mzuzu waqala ukubukela. Ndingathelekisa ukuhamba okubandayo kwifowuni kwi-tech. inkxaso. Nawuphi umnxebi umamele ukurekhodwa kwe-voicemail ukusuka ekuqaleni ukuya ekugqibeleni, kodwa unokuxhoma usebenzisa ukungabhalisi.

Ndingathanda ukuqaphela ukuba kukho okubizwa ngokuba yimfudumalo efudumeleyo (ndifumene le nkcazo ngokunqabileyo kakhulu kwaye kuphela kwiindawo zangaphandle) - oku kuqukuqela okuguquka ukusuka kwingqele ukuya kushushu. Umbuzo uvela - apho ukusetyenziswa)) Ndiza kunika umzekelo ekusebenzeni.

Ndisebenza noAngular. Usebenzisa ngokusebenzayo ii-rxjs. Ukufumana idatha kumncedisi, ndilindele intambo ebandayo kwaye ndisebenzise le ntambo kwi-template usebenzisa i-asyncPipe. Ukuba ndisebenzisa lo mbhobho amaxesha amaninzi, ngoko, ndibuyela kwinkcazo yomlambo obandayo, umbhobho ngamnye uya kucela idatha kumncedisi, into engaqhelekanga ukuyithetha. Kwaye ukuba ndiguqula umlambo obandayo ube ofudumeleyo, ngoko isicelo siya kwenzeka kanye.

Ngokubanzi, ukuqonda uhlobo lokuhamba kunzima kakhulu kubaqalayo, kodwa kubalulekile.

Ba sebenzi

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

Abaqhubi basinika isakhono sokwandisa isakhono sethu sokusebenza ngemisinga. Banceda ukulawula iziganeko ezenzeka kwi-Observable. Siza kujonga isibini sezona zidumileyo, kwaye iinkcukacha ezithe kratya malunga nabaqhubi zinokufumaneka ngokusebenzisa amakhonkco kulwazi oluluncedo.

Abaqhubi - be

Masiqale ngomsebenzi oncedisayo we. Yenza i-Observable ngokusekelwe kwixabiso elilula.

Abaqhubi - isihluzo

Umsebenzisi wesihluzi, njengoko igama libonisa, uhluza isignali yomlambo. Ukuba umsebenzisi ubuya eyinyani, iyatsiba ngakumbi.

Abaqhubi - thatha

thatha - Ithatha ixabiso lenani le-emitters, emva koko intambo iphela.

Abaqhubi - debounceTime

debounceTime - ilahla amaxabiso akhutshiweyo awela ngaphakathi kwexesha elichaziweyo phakathi kweziphumo - emva kokuba ixesha lidlulile, likhupha ixabiso lokugqibela.

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

Abaqhubi - thathaWhile

Ikhupha amaxabiso de i-takeWhile ibuyisela ibubuxoki, emva koko ikhuphe ubhaliso kumsonto.

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

Abaqhubi - dibanisaLatest

Umsebenzisi wecombinLatest uyafana nje nesithembiso.konke. Idibanisa imisonto emininzi ibe nye. Emva kokuba umsonto ngamnye wenze ubuncinci ukukhutshwa, sifumana amaxabiso amva nje akwimo nganye ngendlela yoluhlu. Ngaphaya koko, emva kwayo nayiphi na into ekhutshwayo kwimijelo edityanisiweyo, iya kunika amaxabiso amatsha.

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

Abaqhubi - zip

Zip - Ilinda ixabiso kumsonto ngamnye kwaye yenza uluhlu olusekwe kula maxabiso. Ukuba ixabiso aliveli nakuwuphi na umsonto, iqela aliyi kusekwa.

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

Abaqhubi - iforkJoin

iforkJoin ikwadibanisa imisonto, kodwa ikhupha ixabiso kuphela xa yonke imisonto igqityiwe.

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

Abaqhubi - imephu

Umsebenzisi wokuguqula imephu uguqula ixabiso elikhuphayo libe lelitsha.

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

Abaqhubi – ukwabelana, cofa

Umsebenzisi wempompo ikuvumela ukuba wenze iziphumo ebezingalindelekanga, oko kukuthi, naziphi na izenzo ezingachaphazeli ulandelelwano.

Umsebenzisi oluncedo wesabelo unokuguqula umsinga obandayo ube shushu.

Sigqibile ngabaqhubi. Masidlulele kwiSifundo.

Ukucinga ngokuvakalayo

Ndaye ndahamba ndayokusela iti. Ndidikiwe yilemizekelo 😀

Usapho lwesifundo

Usapho lomxholo ngumzekelo obalaseleyo wokuqukuqela okushushu. Ezi klasi luhlobo lomxube osebenza ngaxeshanye njengento ebonwayo kunye nomjongi. Kuba isihloko singumsonto oshushu, kuyafuneka ukuba ungabhali kuwo. Ukuba sithetha ngezona ndlela ziphambili, zezi:

• okulandelayo - ukudluliselwa kwedatha entsha kumsinga
• impazamo - impazamo kunye nokupheliswa komsonto
• ukugqiba - ukugqitywa komsonto
• rhuma – rhuma kumsinga
• uzikhuphe kubhaliso – uzikhuphe kumsinga
• njengokoObservable - guquka ube ngumkhi-mkhanyo
• toPromise - utshintsha ube sisithembiso

Ziyi-4 5 iindidi zezifundo.

Ukucinga ngokuvakalayo

Kwakukho abantu aba-4 ababethetha emfuleni, kodwa kwafumaniseka ukuba bongeze omnye. Njengoko bethetha, phila kwaye ufunde.

Isifundo esilula new Subject()– olona hlobo lulula lwezifundo. Yenziwe ngaphandle kweeparamitha. Udlulisa amaxabiso afunyenwe kuphela emva kobhaliso.

UkuziphathaIsihloko new BehaviorSubject( defaultData<T> ) - ngokombono wam, uhlobo oluqhelekileyo lwesifundo. Igalelo lithatha ixabiso elimiselweyo. Ihlala igcina idatha yomba wokugqibela, ogqithiswayo xa ubhalisa. Olu didi lukwanalo nendlela yexabiso eliluncedo, elibuyisela ixabiso langoku lomsinga.

Phinda udlaleIsihloko new ReplaySubject(bufferSize?: number, windowTime?: number) -Igalelo lingathatha ngokukhethayo njengengxoxo yokuqala ubungakanani be-buffer yamaxabiso eya kuzigcina ngokwayo, kwaye njengesibini ixesha apho sifuna utshintsho.

I-AsyncSubject new AsyncSubject() - akukho nto eyenzekayo xa ubhalisa, kwaye ixabiso liya kubuyiselwa kuphela xa ligqityiwe. Kuphela lixabiso lokugqibela lomlambo eliya kubuyiswa.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — Amaxwebhu akathethi ngaye kwaye ndiyaqala ukumbona. Ukuba kukho oyaziyo into ayenzayo, nceda ubhale sizokongeza.

Phew. Ewe, siyigubungele yonke into ebendifuna ukukuxelela yona namhlanje. Ndiyathemba ukuba olu lwazi lube luncedo. Unokufunda uluhlu lweereferensi ngokwakho kwithebhu yolwazi oluluncedo.

inkcazelo eluncedo

• Ikhonkco ukuya kumsinga
• Isebenza njani i-JS: amagqabantshintshi enjini, iindlela zexesha lokusebenza, isitakhi sokufowuna
• Isebenza njani i-JS: I-Loop yoMsitho, i-Asynchrony, kunye neendlela ezintlanu zokuPhucula iKhowudi yakho nge-async / ukulinda
• Isebenza njani iLophu yoMsitho kwiJavaSript
• I-Evolution ye-Asynchronous JavaScript
• Yintoni i-RxJS kwaye kutheni iluncedo ukwazi ngayo?
  
• Ukusetyenziswa okusebenzayo kwe-RxJS
• Isifundo se-RxJS esiQwalaselayo-Ukudala kunye nokuBhalisa kwizinto eziQoqwayo
• I-RXJS: Izinto ezibonwayo ezishushu nezibandayo
• Iiklasi, imisebenzi yokudala i-Observable. Abaqhubi.
• AbaSebenzi be-RxJS ngokomzekelo
• Uluhlu lwe-API
• Iindidi zeSifundo kunye neeShedyuli kwi-RxJS

umthombo: www.habr.com