Izinhlelo ezi-Asynchronous ku-JavaScript (Callback, Promise, RxJs)

Sanibonani nonke. U-Sergey Omelnitsky uyaxhumana. Esikhathini esingeside esidlule ngibambe ukusakazwa kwezinhlelo ezisebenzayo, lapho ngikhulume khona nge-asynchrony ku-JavaScript. Namuhla ngithanda ukubhala amanothi ngale ndaba.

Kodwa ngaphambi kokuba siqale indaba eyinhloko, kudingeka senze isethulo. Ngakho-ke ake siqale ngezincazelo: yini isitaki nomugqa?

Isitaki iqoqo elinezici zalo ezitholakala ngokugcina ukungena, isisekelo se-LIFO sokuqala

Jika iqoqo elinezici zalo ezitholakala okokuqala ngqa, ngesisekelo se-FIFO sokuqala

Kulungile, asiqhubeke.

I-JavaScript iwulimi lokuhlela olunochungechunge olulodwa. Lokhu kusho ukuthi kunochungechunge olulodwa kuphela lokusetshenziswa kanye nesitaki esisodwa lapho imisebenzi ibekwe khona umugqa ukuze isetshenziswe. Ngakho-ke, i-JavaScript ingenza umsebenzi owodwa kuphela ngesikhathi, kuyilapho eminye imisebenzi izolinda ithuba layo kusitaki ize ibizwe.

Shayela isitaki iwuhlaka lwedatha, kalula nje, oluqopha ulwazi mayelana nendawo ohlelweni esikuyo. Uma sidlulela kumsebenzi, siphusha ukungena kwawo phezulu kwesitaki. Uma sibuya kumsebenzi, sikhipha ingxenye ephezulu kakhulu esitakini bese sigcina sibuyele lapho sibize khona umsebenzi. Yilokhu kuphela isitaki esingakwenza. Futhi manje umbuzo othakazelisayo kakhulu. Ngabe i-asynchrony isebenza kanjani kuJavasScript?

Eqinisweni, ngaphezu kwesitaki, iziphequluli zinomugqa okhethekile wokusebenza nalokho okubizwa nge-WebAPI. Imisebenzi ekulo layini izokwenziwa ngokulandelana kwayo kuphela ngemva kokuba isitaki sesisulwe ngokuphelele. Kungemva kwalokhu kuphela lapho ziphushwa zisuka kulayini ziyiswe esitakini ukuze zibulawe. Uma kukhona okungenani into eyodwa esitakini okwamanje, ngeke zengezwe esitakini. Kungenxa yalokhu kanye okwenza ukuthi imisebenzi yokubiza ngesikhathi sokuvala ngokuvamile inganembi ngesikhathi, njengoba umsebenzi awukwazi ukusuka kumugqa uye kusitaki ngenkathi sigcwele.

Ake sibheke isibonelo esilandelayo futhi siqale ngokuqalisa isinyathelo ngesinyathelo. Ake sibone nokuthi kwenzekani ohlelweni.

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

1) Akukho okwenzekayo okwamanje. Ikhonsoli yesiphequluli icacile, isitaki sekholi asinalutho.

2) Bese umyalo we-console.log('Hi') wengezwa kusitaki socingo.

3) Futhi kuyagcwaliseka

4) Bese i-console.log('Hi') iyakhishwa kusitaki sekholi.

5) Manje dlulela kumyalo setTimeout(function cb1() {… }). Yengezwa kusitaki sekholi.

6) Umyalo we-setTimeout(function cb1() {… }) uyasetshenziswa. Isiphequluli sidala isibali sikhathi esiyingxenye ye-Web API. Izokwenza ukubala wehle.

7) Umyalo we-setTimeout(function cb1() {... }) usuqedile umsebenzi wawo futhi uyakhishwa kusitaki socingo.

8) Umyalo console.log('Bye') yengezwa kusitaki socingo.

9) Umyalo we-console.log('Bye') uyasetshenziswa.

10) Umyalo we-console.log('Bye') uyakhishwa kusitaki sekholi.

11) Ngemva kokuthi okungenani kudlule u-5000 ms, isibali sikhathi siyanqamuka futhi sibeke i-callback cb1 emgqeni wokubuyisela emuva.

12) Iluphu yomcimbi ithatha i-function cb1 emgqeni wokuphinda ushayele bese iyibeka esitakini sezingcingo.

13) Umsebenzi we-cb1 uyasetshenziswa futhi wengeza i-console.log('cb1') kusitaki socingo.

14) Umyalo we-console.log('cb1') uyasetshenziswa.

15) Umyalo we-console.log('cb1') uyakhishwa kusitaki socingo.

16) Umsebenzi we-cb1 uyasuswa kusitaki socingo.

Ake sibheke isibonelo ku-dynamics:

Hhayi-ke, sibheke ukuthi i-asynchrony isetshenziswa kanjani kuJavaScript. Manje ake sikhulume kafushane mayelana nokuvela kwekhodi ye-asynchronous.

Ukuvela kwekhodi ye-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);
                    })
                })
            })
        })
    })
});

Ukuhlelwa kwe-Asynchronous njengoba sikwazi ku-JavaScript kungenziwa kuphela ngemisebenzi. Angadluliswa njenganoma yimuphi omunye uguquko kweminye imisebenzi. Bazalwa kanjena abafonayo. Futhi kupholile, kumnandi futhi kuyadlala, kuze kube yilapho kuphenduka ukudabuka, ukudangala nokudabuka. Kungani? Kulula:

• Njengoba inkimbinkimbi yekhodi ikhula, iphrojekthi iphenduka ngokushesha ibe amabhlogo angacacile, akhiwe ngokuphindaphindiwe - "isihogo sokubuyisela".
• Ukuphatha iphutha kungaba lula ukuphuthelwa.
• Awukwazi ukubuyisela izinkulumo ngokubuyisela.

Ngokufika kukaSithembiso, isimo saba ngcono.

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 amaketango esithembiso, athuthukisa ukufundeka kwekhodi
• Kuvele indlela ehlukile yokubamba amaphutha
• Kwengezwe ithuba lokubulawa okufanayo kusetshenziswa i-Promise.all
• Singaxazulula i-asynchrony efakwe esidlekeni sisebenzisa i-async/await

Kodwa izithembiso zinemikhawulo yazo. Isibonelo, isithembiso asinakukhanselwa ngaphandle kokudansa ngethamborini, futhi okubaluleke kakhulu ukuthi sisebenza ngenani elilodwa.

Hhayi-ke, sesisondele ngokushelela ezinhlelweni ezisebenzayo. Ukhathele? Hhayi-ke, ngenhlanhla, ungahamba uyokwenza itiye, ucabange ngakho bese ubuya uzofunda okwengeziwe. Futhi ngizoqhubeka.

Uhlelo olusebenzayo i-paradigm yokuhlela egxile ekugelezeni kwedatha nasekushintsheni ukusakazeka. Ake sibhekisise ukuthi kuyini ukusakazwa kwedatha.

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

const eventsArray = [];

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

Ake sicabange ukuthi sinenkambu yokufaka. Sakha uhlu futhi kukho konke ukhiye womcimbi wokufaka sizogcina umcimbi ngohlelo lwethu. Ngesikhathi esifanayo, ngingathanda ukuqaphela ukuthi uhlu lwethu luhlelwa ngesikhathi, i.e. inkomba yezenzakalo zakamuva inkulu kunenkomba yezangaphambili. Amalungu afanayo afanayo ayimodeli eyenziwe lula yokugeleza kwedatha, kodwa ayikashintshi. Ukuze lolu hlelo lubizwe ngokuphephile ngokuthi ukusakaza, kufanele lukwazi ngandlela thize ukwazisa ababhalisile ukuthi idatha entsha ifikile kuyo. Ngakho sifika encazelweni yokugeleza.

Ukusakaza kwedatha

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

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

Ukugeleza iwuxhaxha lwedatha ehlelwa ngesikhathi engabonisa ukuthi idatha ishintshile. Manje cabanga ukuthi kulula kangakanani ukubhala ikhodi lapho isenzo esisodwa sidinga ukubiza izehlakalo ezimbalwa ezingxenyeni ezihlukene zekhodi. Simane sibhalisele ukusakaza futhi kuzosazisa uma izinguquko zenzeka. Futhi umtapo wezincwadi wakwa-RxJs ungakwenza lokhu.

RxJS iwumtapo wolwazi wokusebenza ngezinhlelo ezingavumelaniyo nezisekelwe ezenzakalweni kusetshenziswa ukulandelana okubonakalayo. Umtapo wolwazi uhlinzeka ngohlobo oluyisisekelo Kuyabonakala, izinhlobo eziningana ezisizayo (Umbukeli, Abahleli, Izihloko) kanye nabaqhubi abasebenza ngemicimbi njengamaqoqo (imephu, isihlungi, nciphisa, njalo nezinye ezifanayo ezivela ku-JavaScript Array).

Masiqonde imiqondo eyisisekelo yalo mtapo wolwazi.

Kuyaqapheleka, Isibuki, Umkhiqizi

Okuqaphelekayo wuhlobo lokuqala oluyisisekelo esizolubheka. Leli klasi liqukethe ingxenye eyinhloko yokuqaliswa kwe-RxJs. Ihlotshaniswa nokusakaza okubonakalayo, okungabhaliswa kukho kusetshenziswa indlela yokubhalisa.

I-Observable isebenzisa indlela yokusiza yokudala izibuyekezo, okuthiwa Observer. Umthombo wamanani we-Observer ubizwa ngokuthi Producer. Lokhu kungaba amalungu afanayo, i-iterator, isokhethi lewebhu, uhlobo oluthile lomcimbi, njll. Ngakho-ke singasho ukuthi okubonakalayo kungumqhubi phakathi koMkhiqizi kanye ne-Observer.

Okuqaphelekayo kusingatha izinhlobo ezintathu zemicimbi ye-Observer:

• okulandelayo - idatha entsha
• iphutha – iphutha uma ukulandelana kuphelile ngenxa yokuhlukile. lesi sigameko siphinde sisho ukuqedwa kokulandelana.
• ephelele - isignali mayelana nokuqedwa kokulandelana. Lokhu kusho ukuthi ngeke kusaba khona idatha entsha.

Ake sibone idemo:

Ekuqaleni sizocubungula amanani 1, 2, 3, futhi ngemva kwesekhondi elingu-1. sizothola 4 futhi siqede ukusakaza kwethu.

Ecabanga ngokuzwakalayo

Futhi-ke ngabona ukuthi ukuyikhuluma kwakuthakazelisa kakhulu kunokubhala ngakho. 😀

Subscription

Uma sibhalisa ekusakazeni sidala ikilasi elisha ukubhalisaokusinika ikhono lokuzikhipha ohlwini sisebenzisa indlela zikhiphe ohlwini. Futhi singaqoqa okubhaliselwe sisebenzisa indlela engeza. Hhayi-ke, kunengqondo ukuthi singakwazi ukuhlukanisa imicu sisebenzisa ukususa. Izindlela zokungeza nokukhipha zamukela okunye ukubhalisa njengokufaka. Ngingathanda ukuqaphela ukuthi lapho sizikhipha ohlwini, siyazikhipha ohlwini kukho konke okubhaliselwe kwezingane njengokungathi kubize indlela yokuzikhipha ohlwini. Qhubeka.

Izinhlobo zemifudlana

HOT
BHALA

Umdidiyeli udalwe ngaphandle kokubonakala
Umkhiqizi udalwe ngaphakathi kokubonakalayo

Idatha idluliswa ngesikhathi okubonakalayo kudaleka
Idatha inikezwa ngesikhathi sokubhalisa

Udinga ingqondo eyengeziwe ukuze uzikhiphe ohlwini
Uchungechunge luyaphela ngokwalo

Isebenzisa ubudlelwano phakathi kwabantu abaningi
Isebenzisa ubudlelwano bomuntu nomuntu

Konke okubhaliselwe kunencazelo efanayo
Okubhaliselwe kuzimele

Idatha ingalahleka uma ungenakho ukubhalisa
Ikhipha kabusha wonke amanani okusakaza okubhalisa okusha

Ukuze nginikeze isifaniso, ngingacabanga ngokusakaza okushisayo njengefilimu yasetiyetha. Ngasiphi isikhathi ngesikhathi ufika, kusukela ngaleso sikhathi waqala ukubuka. Ngingaqhathanisa ukugeleza okubandayo nekholi ku-tech. ukusekela. Noma yimuphi ofonayo ulalela ukurekhodwa kwevoyisimeyili kusukela ekuqaleni kuze kube sekupheleni, kodwa ungavala ucingo usebenzisa ukuzikhipha ohlwini.

Ngingathanda ukuqaphela ukuthi kukhona okuthiwa ukugeleza okufudumele (ngiye ngabhekana nencazelo enjalo ngokwedlulele kuyaqabukela futhi kuphela emiphakathini yangaphandle) - lokhu ukugeleza okuguqula ukugeleza okubandayo kuya kokushisayo. Umbuzo uphakama - kuphi ukusebenzisa)) Ngizonikeza isibonelo ngokusebenza.

Ngisebenza ne-Angular. Usebenzisa ama-rxjs ngenkuthalo. Ukwamukela idatha kuseva, ngilindele intambo ebandayo futhi ngisebenzise le ntambo kusifanekiso usebenzisa i-asyncPipe. Uma ngisebenzisa le payipi izikhathi eziningana, khona-ke, ngibuyela encazelweni yomfudlana obandayo, ipayipi ngalinye lizocela idatha kuseva, okuyinto engavamile ukusho okuncane. Futhi uma ngiguqula umfudlana obandayo ube ofudumele, isicelo sizokwenzeka kanye.

Ngokuvamile, ukuqonda uhlobo lokugeleza kunzima kakhulu kwabaqalayo, kodwa kubalulekile.

Operators

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

Ama-opharetha asinika ikhono lokukhulisa ikhono lethu lokusebenza nokusakaza. Basiza ukulawula izehlakalo ezenzeka ku-Observable. Sizobheka ezimbalwa ezidume kakhulu, futhi imininingwane eyengeziwe mayelana nama-opharetha ingatholwa kusetshenziswa izixhumanisi kulwazi oluwusizo.

Abaqhubi - be

Ake siqale nge-axiliary operator ye. Idala Okuqaphelekayo ngokusekelwe kunani elilula.

Ama-operators - isihlungi

I-opharetha yesihlungi, njengoba negama liphakamisa, ihlunga isignali yokusakaza. Uma u-opharetha ebuya ngokweqiniso, weqa ngokuqhubekayo.

Abaqhubi - thatha

thatha - Ithatha inani lenani lama-emitters, ngemva kwalokho intambo iphela.

Abasebenzisi - debounceTime

i-debounceTime - ilahla amanani akhishiwe awela phakathi nesikhathi esishiwo phakathi kokuphumayo - ngemva kokuba isikhawu sesikhathi sesidlulile, ikhipha inani lokugcina.

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

Ama-operators - takeWhile

Ikhipha amanani kuze kube i-takeWhile ibuyisela amanga, ngemva kwalokho iyazikhipha ochungechungeni.

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 - hlanganisaLatest

Umsebenzisi we-combinLatest ucishe ufane nesithembiso.konke. Ihlanganisa imicu eminingi ibe munye. Ngemuva kokuthi uchungechunge ngalunye lwenza okungenani ukukhishwa okukodwa, sithola amanani akamuva asuka kulelo nalelo ngendlela yohlu. Ngaphezu kwalokho, ngemva kwanoma yikuphi ukukhishwa okuvela ekusakazweni okuhlanganisiwe, kuzonikeza amanani amasha.

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

Abasebenzisi - zip

I-Zip - Ilinda inani elisuka kuchungechunge ngalunye futhi yakha amalungu afanayo ngokusekelwe kulawa manani. Uma inani lingaveli kunoma yiluphi uchungechunge, iqembu ngeke lakhiwe.

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

Ama-operators - forkJoin

I-forkJoin iphinda ihlanganise imicu, kodwa ikhipha inani kuphela lapho yonke imicu isiqediwe.

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

Ama-operators - imephu

Umsebenzisi wokuguqula imephu uguqula inani le-emitter libe elisha.

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

Ama-operators – share, cindezela

I-opharetha kampompi ikuvumela ukuthi wenze imiphumela emibi, okungukuthi, noma yiziphi izenzo ezingaphazamisi ukulandelana.

Umsebenzisi we-share utility angenza umfudlana obandayo ube oshisayo.

Sesiqedile ngabasebenza. Asidlulele kwiSihloko.

Ecabanga ngokuzwakalayo

Bese ngiyophuza itiye. Sengikhathele yilezibonelo 😀

Umndeni wesihloko

Umndeni wesihloko uyisibonelo esihle sokugeleza okushisayo. Lawa makilasi awuhlobo lwengxubevange esebenza ngesikhathi esisodwa njengento ebonakalayo nesibukeli. Njengoba isihloko siwuchungechunge olushisayo, kuyadingeka ukuthi uzikhiphe ohlwini. Uma sikhuluma ngezindlela eziyinhloko, lezi yizi:

• okulandelayo - ukudluliswa kwedatha entsha ekusakazweni
• iphutha - iphutha nokunqanyulwa kochungechunge
• okuphelele - ukuqedwa kochungechunge
• bhalisa - bhalisa ekusakazeni
• zikhiphe ohlwini - zikhiphe ohlwini lokusakaza
• njengobaObservable - shintsha ube isibukeli
• toPromise - kuguqula kube isithembiso

Kunezinhlobo ezingu-4 5 zezifundo.

Ecabanga ngokuzwakalayo

Kwakukhona abantu abangu-4 ababekhuluma emfudlaneni, kodwa kuvele ukuthi bangeze omunye ngaphezulu. Njengoba besho, phila futhi ufunde.

Isihloko Esilula new Subject()– uhlobo olulula lwezifundo. Idalwe ngaphandle kwamapharamitha. Idlulisela amanani atholwe kuphela ngemva kokubhalisa.

Isihloko sokuziphatha new BehaviorSubject( defaultData<T> ) - ngombono wami, uhlobo oluvame kakhulu lwesihloko. Okokufaka kuthatha inani elizenzakalelayo. Ihlala ilondoloza idatha yokukhishwa kokugcina, edluliselwa lapho kubhaliswa. Lesi sigaba futhi sinendlela yenani eliwusizo, elibuyisela inani lamanje lokusakaza.

Dlala kabushaIsihloko new ReplaySubject(bufferSize?: number, windowTime?: number) - Okokufaka kungathatha ngokuzikhethela njengengxabano yokuqala usayizi webhafa wamanani ezozigcina ngokwawo, futhi okwesibili isikhathi lapho sidinga khona izinguquko.

I-AsyncSubject new AsyncSubject() — akukho okwenzekayo lapho ubhalisa, futhi inani lizobuyiselwa kuphela uma seliqediwe. Inani lokugcina kuphela lokusakaza elizobuyiswa.

I-WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Amaphepha awasho lutho ngaye futhi ngiyaqala ukumbona. Uma ekhona owaziyo ukuthi wenzani ngicela abhale sizokwengeza.

Phew. Hhayi-ke, sikuhlanganise konke ebengifuna ukukutshela kona namuhla. Ngethemba ukuthi lolu lwazi lube usizo. Ungafunda uhlu lwezinkomba ngokwakho kuthebhu yolwazi oluwusizo.

ukwaziswa okuwusizo

• Xhuma ekusakazeni
• Isebenza kanjani i-JS: ukubuka konke kwenjini, izindlela zesikhathi sokusebenza, isitaki socingo
• Isebenza kanjani i-JS: I-Event Loop, i-Asynchrony, kanye Nezindlela Ezinhlanu Zokuthuthukisa Ikhodi Yakho nge-async/ait
• Isebenza kanjani i-Event Loop ku-JavaSript
• Ukuvela kwe-Asynchronous JavaScript
• Iyini i-RxJS futhi kungani kubalulekile ukwazi ngayo?
  
• Ukusetshenziswa okungokoqobo kwe-RxJS
• Okokufundisa Okuqaphelekayo kwe-RxJS - Ukudala nokubhalisa kokubonakalayo
• I-RXJS: Okubonwa Okushisayo Nokubandayo
• Amakilasi, imisebenzi yokudala i-Observable. Ama-operators.
• I-RxJS Operators Ngokwesibonelo
• Uhlu lwe-API
• Izinhlobonhlobo zesihloko namashejuli ku-RxJS

Source: www.habr.com