Asynchronous programming muJavaScript (Callback, Promise, RxJs)

Mhoroi mose. Sergey Omelnitsky ari kutaura. Nguva pfupi yapfuura ndakabata rukova pane reactive programming, kwandakataura nezve asynchrony muJavaScript. Nhasi ndinoda kutora manotsi pachinhu ichi.

Asi tisati tatanga mashoko makuru, tinofanira kunyora mashoko okusuma. Saka ngatitangei netsananguro: chii chinonzi stack uye mutsara?

Stack muunganidzwa une zvinhu zvinowanikwa pane yekupedzisira-mukati, yekutanga-kunze LIFO hwaro

Queue muunganidzwa une zvinhu zvinowanikwa pane yekutanga-mukati, yekutanga-kunze kweFIFO hwaro

Zvakanaka, ngatienderere mberi.

JavaScript mutauro wekuronga une tambo imwe chete. Izvi zvinoreva kuti pane tambo imwe chete yekuuraya uye imwe stack iyo mabasa anomisikidzwa kuti aitwe. Naizvozvo, JavaScript inogona kungoita oparesheni imwe chete panguva, nepo mamwe maoparesheni achimirira nguva yavo pastack kusvika vadanwa.

Fona stack idhizaini yedata iyo, kungoisa, inorekodha ruzivo nezve nzvimbo muchirongwa chatiri. Kana isu tikapfuura mune basa, isu tinosundira kupinda kwayo kumusoro kwestack. Patinodzoka kubva kune basa, tinoburitsa chinhu chepamusoro-soro kubva pachigadziko uye tinopedzisira tadzokera kwatakadaidza basa. Izvi ndizvo zvese izvo stack inogona kuita. Uye zvino mubvunzo unonakidza zvikuru. Saka asynchrony inoshanda sei muJavasScript?

Muchokwadi, mukuwedzera kune stack, mabhurawuza ane yakakosha mutsara wekushanda neinonzi WebAPI. Mabasa ari mumutsara uyu achaitwa muhurongwa chete mushure mekunge stack yanyatsocheneswa. Chete mushure meizvi ndipo ivo vanosundirwa kubva pamutsetse kuenda pamurwi kuti vaurayiwe. Kana paine kanenge chinhu chimwe chete pane stack panguva ino, saka havagone kuwedzerwa kune stack. Ndizvo chaizvo nekuda kweizvi kuti mabasa ekufona nenguva yekupera kazhinji haana kunyatsojeka nenguva, sezvo basa racho risingakwanise kubva pamutsara kuenda kune stack iro rakazara.

Ngatitarisei muenzaniso unotevera uye titange nekuita kwayo nhanho-ne-nhanho. Ngationeiwo zvinoitika muhurongwa.

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

1) Hapana chiri kuitika parizvino. Iyo browser console yakajeka, iyo yekufona stack haina chinhu.

2) Ipapo iyo console.log('Hi') murairo inowedzerwa kune yekufona stack.

3) Uye zvinozadziswa

4) Ipapo console.log('Hi') inobviswa kubva pane yekufona stack.

5) Zvino enda kune yekuraira setTimeout(basa cb1() {... }). Iyo inowedzerwa kune yekufona stack.

6) Iyo setTimeout(basa cb1() {… }) rairo rinoitwa. Iyo browser inogadzira timer iri chikamu cheWebhu API. Ichaita countdown.

7) The setTimeout(function cb1() {... }) command yapedza basa rayo uye yabviswa kubva pakufona stack.

8) Iyo command console.log('Bye') inowedzerwa kune yekufona stack.

9) Murairo we console.log('Bye') unoitwa.

10) Murairo console.log('Bye') inobviswa kubva pane yekufona stack.

11) Mushure mekunge 5000 ms yapfuura, timer inopera uye inoisa callback cb1 mumutsara wekufona.

12) Chiitiko loop inotora basa cb1 kubva kumutsetse wekufona uye inoiisa pane yekufona stack.

13) Basa cb1 rinoitwa uye rinowedzera console.log('cb1') kune stack yekufona.

14) Murairo we console.log('cb1') unoitwa.

15) Murairo console.log('cb1') inobviswa kubva pane yekufona stack.

16) Basa cb1 rinobviswa kubva pakufona stack.

Ngatitarisei muenzaniso mune dynamics:

Zvakanaka, takatarisa kuti asynchrony inoshandiswa sei muJavaScript. Zvino ngatitaurei muchidimbu nezve shanduko yeasynchronous kodhi.

Iko kushanduka kweasynchronous kodhi.

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

Asynchronous programming sezvatinoiziva muJavaScript inogona kungoitwa nemabasa. Vanogona kupfuudzwa seimwe shanduko kune mamwe mabasa. Aya ndiwo matangiro akaita macallbacks. Uye inotonhorera, inofadza uye inotamba, kusvikira yashanduka kuva kusuruvara, kuora mwoyo uye kusuruvara. Sei? Zviri nyore:

• Sezvo kuoma kwekodhi kunowedzera, purojekiti inokurumidza kushanduka kuita isina kujeka, yakadzokororwa yakavharirwa zvidhinha - "callback hero".
• Kukanganisa kubata kunogona kuve nyore kupotsa.
• Iwe haugone kudzorera mataurirwo nekudzoka.

Nekuuya kwaPromise zvinhu zvakabva zvaita nani.

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

• Vimbiso cheni dzakaonekwa, izvo zvakavandudza kuverenga kwekodhi
• Imwe nzira yakasiyana yekubata zvikanganiso yakaonekwa
• Yakawedzera mukana weparallel execution uchishandisa Promise.all
• Tinogona kugadzirisa nested asynchrony tichishandisa async/kumirira

Asi zvipikirwa zvine ganhuriro dzazvo. Semuenzaniso, vimbiso haigone kudzimwa pasina kutamba nengoma, uye chinonyanya kukosha ndechekuti inoshanda nehumwe kukosha.

Zvakanaka, isu takasvika zvakanaka reactive programming. Waneta? Zvakanaka, nerombo rakanaka, unogona kuenda kunogadzira tii, funga nezvazvo uye wodzoka kuzoverenga zvimwe. Uye ndicharamba.

Reactive programming is a programming paradigm yakatarisana nekuyerera kwedata uye shanduko yekuparadzira. Ngatitarisei zvakanyanya kuti chii chinonzi data stream.

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

const eventsArray = [];

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

Ngatimbofungidzira kuti tine ndima yekupinza. Isu tiri kugadzira dhizaini uye kune yega kiyi yechiitiko chekuisa isu tichachengeta chiitiko muhurongwa hwedu. Panguva imwecheteyo, ndinoda kuona kuti urongwa hwedu hunorongwa nenguva, i.e. indekisi yezvinoitika gare gare yakakura kupfuura indekisi yezvapakuvamba. Rondedzero yakadaro imhando yakareruka yekuyerera kwedata, asi haisati yave kuyerera. Kuti hurongwa uhu hunzi hwakachengeteka kunzi rukova, hunofanirwa kukwanisa kuzivisa vanyoreri kuti data idzva rasvika mairi. Saka tinosvika patsanangudzo yekuyerera.

Data stream

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

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

Kuyerera rondedzero yedata yakarongwa nenguva inogona kuratidza kuti data rachinja. Zvino fungidzira kuti zvinova nyore sei kunyora kodhi umo chiito chimwe chinoda kudaidza zviitiko zvakati wandei munzvimbo dzakasiyana dzekodhi. Isu tinongonyorera kurwizi uye ichatizivisa kana shanduko dzaitika. Uye raibhurari yeRxJs inogona kuita izvi.

RxJS iraibhurari yekushanda neasynchronous uye chiitiko-chakavakirwa zvirongwa uchishandisa zvinoonekwa zvinotevedzana. Raibhurari inopa mhando yemhando Zvinotaridzika, akati wandei ebetsero mhando (Mucherechedzi, Varongi, Zvidzidzo) nevashandisi vekushanda nezviitiko sekuunganidza (mepu, sefa, kuderedza, zvese uye zvakafanana kubva kuJavaScript Array).

Ngatinzwisisei pfungwa huru dzeraibhurari iyi.

Zvinoonekwa, Mucherechedzi, Mugadziri

Inocherechedzwa ndiyo yekutanga mhando yatichatarisa. Iyi kirasi ine chikamu chikuru chekushandiswa kweRxJs. Iyo yakabatana nerukova runocherechedzwa, iyo inogona kunyoreswa kushandisa nzira yekunyoresa.

Inocherekedzwa inoshandisa mubatsiri nzira yekugadzira zvigadziriso, izvo zvinodaidzwa Mucherechedzi. Kunobva kukosha kweObserver kunonzi mugadziri. Izvi zvinogona kunge zvakarongwa, iterator, web socket, imwe mhando yechiitiko, nezvimwe. Saka tinogona kutaura kuti anocherechedzwa ari conductor pakati peProducer neObserver.

Inocherekedzwa inobata mhando nhatu dzeObserver zviitiko:

• inotevera - data itsva
• kukanganisa - kukanganisa kana kutevedzana kwapera nekuda kwekusiyana. chiitiko ichi chinorevawo kupedzwa kwekutevedzana.
• yakakwana - chiratidzo pamusoro pekupedzwa kwekutevedzana. Izvi zvinoreva kuti hapazovi nedata idzva.

Ngationei demo:

Pakutanga isu tichagadzirisa kukosha kwe1, 2, 3, uye mushure mesekondi imwe. tichawana 1 topedza rukova rwedu.

Kufunga zvinonzwika

Uye ipapo ndakaona kuti kuzvitaura kwainakidza kupfuura kunyora nezvazvo. 😀

chipeto

Patinonyorera kune rukova tinogadzira kirasi nyowani subscriptionizvo zvinotipa kugona kuzvibvisa uchishandisa nzira kusazvinyora. Tinogonawo kuita mapoka mapoka tichishandisa nzira yacho wedzera. Zvakanaka, zvine musoro kuti isu tikwanise kumisa tambo tichishandisa Bvisa. Nzira dzekuwedzera nekubvisa dzinogamuchira imwe kunyorera sekuisa. Ndinoda kuziva kuti patinozvibvisa, tinobvisa kunyoresa kwevana vese sekunge vadaidza nzira yekusanyoresa. Enderera mberi.

Mhando dzehova

HOT
Cold

Mugadziri anogadzirwa kunze kwekuonekwa
Mugadziri anogadzirwa mukati mekuona

Data inotamiswa panguva iyo inocherechedzwa inogadzirwa
Data inopihwa panguva yekunyorera

Unoda imwe pfungwa yekuregedza kunyoresa
shinda inopera yega

Inoshandisa hukama hweumwe-kune-vakawanda
Inoshandisa hukama hweumwe-kune-umwe

Kuzvinyoresa kwese kune zvakunoreva zvakafanana
Kunyoreswa kwakazvimirira

Data inogona kurasika kana iwe usina kunyorera
Inoburitsazve ese madhiri erukova ekunyoreswa kutsva

Kuti ndipe mufananidzo, ndaizofunga nezverukova runopisa sebhaisikopo munhandare. Panguva yawakasvika, kubva panguva iyoyo wakatanga kuona. Ini ndaizofananidza kuyerera kunotonhora kune kufona mu tech. rutsigiro. Chero munhu anofona anoteerera kurekodhwa kwevoicemail kubva pakutanga kusvika kumagumo, asi unogona kusungirira usinganyore.

Ndinoda kuziva kuti kunewo anonzi anodziya anoyerera (ndasangana netsanangudzo iyi zvakanyanya kashoma uye chete munharaunda dzekunze) - uku kuyerera kunoshandura kubva pakutonhora kuenda kune inopisa. Mubvunzo unomuka - kupi kushandisa)) Ndichapa muenzaniso kubva pakuita.

Ndiri kushanda neAngular. Anoshandisa zvakasimba rxjs. Kuti ndigamuchire data kune sevha, ndinotarisira tambo inotonhora uye ndoshandisa iyi tambo mutemplate uchishandisa asyncPipe. Kana ndikashandisa pombi iyi kakawanda, saka, kudzokera kune tsananguro yerukova runotonhora, pombi imwe neimwe ichakumbira data kubva kune server, izvo zvinoshamisa kutaura zvishoma. Uye kana ndikashandura rukova runotonhora kuita runodziya, ipapo chikumbiro chichaitika kamwe chete.

Kazhinji, kunzwisisa rudzi rwekuyerera kwakaoma kune vanotanga, asi kwakakosha.

Operators

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

Maoperator anotipa kugona kuwedzera kugona kwedu kushanda nehova. Vanobatsira kudzora zviitiko zviri kuitika muObservable. Isu tichatarisa kune akati wandei anonyanya kufarirwa, uye zvimwe zvakawanda nezvevashandisi zvinogona kuwanikwa uchishandisa zvinongedzo mune ruzivo runobatsira.

Vashandi - ve

Ngatitangei nemubatsiri mushandisi we. Inogadzira Inocherechedzwa zvichibva pane iri nyore kukosha.

Vashandi - sefa

Iyo sefa inoshanda, sekureva kunoita zita, inosefa chiratidzo cherukova. Kana mushandisi akadzoka chokwadi, inosvetuka mberi.

Vashandi - tora

tora - Inotora kukosha kwenhamba ye emitters, mushure mezvo tambo inopera.

Vashandisi - debounceTime

debounceTime - inorasa tsika dzakaburitswa dzinowira mukati menguva yakatarwa pakati pezvinobuda - mushure mekunge nguva yadarika, inoburitsa kukosha kwekupedzisira.

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

Vashandisi - takeWhile

Inoburitsa kukosha kusvika takeWhile ichidzosa nhema, mushure mezvo inobvisa kubva pashinda.

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

Vashandisi - batanidzaLatest

The combineLatest opareta yakati fananei nevimbiso.zvose. Inosanganisa tambo dzakawanda kuita imwe. Mushure mekunge tambo yega yega yaita kanenge kamwechete kubuda, isu tinowana yazvino hunhu kubva kune imwe neimwe nenzira yehurongwa. Kupfuurirazve, mushure mechero kuburitsa kubva muhova dzakabatanidzwa, ichapa hunyowani hutsva.

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

Vashandisi - zip

Zip - Inomirira kukosha kubva kune yega yega shinda uye inogadzira rondedzero inoenderana neizvi zvakakosha. Kana kukosha kusingabvi kune chero shinda, ipapo boka harizoumbwa.

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

Vashandisi - forkJoin

forkJoin inojoinhawo tambo, asi inongoburitsa kukosha kana shinda dzese dzapera.

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

Vashandi - mepu

Iyo mepu shanduko mushandisi inoshandura kukosha emitter kuita imwe nyowani.

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

Operators - share, tap

Iyo tap opareta inobvumidza iwe kuita mhedzisiro, kureva, chero zviito zvisingakanganise kutevedzana.

Iyo share utility operator inogona kushandura rukova runotonhora kuita rwunopisa.

Tapedza nevashandisi. Ngatienderei kuChidzidzo.

Kufunga zvinonzwika

Ndakabva ndaenda kunonwa tea. Ndaneta nemienzaniso iyi 😀

Nyaya yemhuri

Mhuri yenyaya ndiyo muenzaniso mukuru wekuyerera kunopisa. Aya makirasi imhando yehybrid inoshanda panguva imwe chete seinocherekedzwa uye inocherekedza. Sezvo chinyorwa chiri shinda inopisa, zvinodikanwa kuti urege kunyoresa kubva kwairi. Kana tikataura nezve nzira huru, saka idzi ndeidzi:

• chinotevera - kuendesa data nyowani kurwizi
• kukanganisa - kukanganisa uye kupera kwe thread
• kukwana - kupera kweshinda
• nyoresa - kunyorera kune rwizi
• bvisa - bvisa kunyoresa kubva murukova
• asObservable - shandura kuva mucherechedzi
• kuPromise - inoshandura kuita vimbiso

Kune 4 5 marudzi ezvidzidzo.

Kufunga zvinonzwika

Parukova paive nevanhu 4 vaitaura, asi zvakazoonekwa kuti vawedzera mumwe. Sezvavanotaura, rarama uye dzidza.

Chidzidzo Chiri Nyore new Subject()- mhando yakapfava yezvidzidzo. Yakagadzirwa pasina parameters. Inotumira kukosha kwakagamuchirwa chete mushure mekunyorera.

BehaviorSubject new BehaviorSubject( defaultData<T> ) - mumaonero angu, rudzi rwakajairika rwechidzidzo. Iko kupinza kunotora kukosha kwekutanga. Nguva dzose inochengetedza data yenyaya yekupedzisira, iyo inofambiswa paunenge uchinyorera. Iyi kirasi ine zvakare yakakosha kukosha nzira, iyo inodzosera ikozvino kukosha kwerukova.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) -Iyo yekupinza inogona kutora sarudzo seyekutanga gakava saizi yebuffer yehunhu iyo ichazvichengeta pachayo, uye sechipiri nguva yatinoda shanduko.

AsyncSubject new AsyncSubject() - hapana chinoitika kana uchinyorera, uye kukosha kunodzoserwa chete kana kwapera. Chekupedzisira kukosha kwerukova ndiko kudzoserwa.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Zvinyorwa hazvina kunyarara nezvake uye ndiri kumuona kekutanga. Kana paine anoziva zvaanoita ngaanyore towedzera.

Phew. Zvakanaka, takafukidza zvese zvandaida kukuudza nhasi. Ndinovimba ruzivo urwu rwaibatsira. Iwe unogona kuverenga rondedzero yemareferensi iwe pachako mune inobatsira ruzivo tab.

anobatsira mashoko

• Batanidza kuyerera
• Mashandiro anoita JS: kutarisisa kweinjini, nzira dzekumhanya, kufona stack
• Mashandiro anoita JS: Chiitiko Loop, Asynchony, uye Nzira shanu dzeKuvandudza Kodhi Yako neasync/kumirira
• Iyo Chiitiko Loop inoshanda sei muJavaSript
• Iko Kushanduka kweAsynchronous JavaScript
• Chii chinonzi RxJS uye nei zvichibatsira kuziva nezvazvo?
  
• Kushanda kushandiswa kweRxJS
• RxJS Inocherechedzwa Dzidziso - Kugadzira & Kunyoresa kune Zvinoonekwa
• RXJS: Inopisa uye Inotonhora Inoonekwa
• Makirasi, mabasa ekugadzira Inooneka. Operators.
• RxJS Vashandisi Nemuenzaniso
• Chinyorwa che API
• Mhando dzakasiyana dzeChinyorwa uye maSchedule muRxJS

Source: www.habr.com