Lumelang bohle. Sergey Omelnitsky o buisana le eena. Haufinyane tjena ke ile ka amohela molaetsa oa lenaneo le sebetsang, moo ke ileng ka bua ka asynchrony ho JavaScript. Kajeno ke rata ho ngola lintlha ka boitsebiso bona.
Empa pele re qala taba ea sehlooho, re lokela ho ngola selelekela. Joale ha re qaleng ka litlhaloso: stack le queue ke eng?
Stack ke pokello eo likarolo tsa eona li fumanoang motheong oa ho qetela, oa pele oa LIFO
Moeli ke pokello eo likarolo tsa eona li fumanoang motheong oa pele, oa pele oa FIFO
Ho lokile, ha re tsoeleng pele.
JavaScript ke puo ea lenaneo e nang le khoele e le 'ngoe. Sena se bolela hore ho na le khoele e le 'ngoe feela ea ts'ebetso le stack e le' ngoe eo mesebetsi e behiloeng ho eona bakeng sa ho etsoa. Ka hona, JavaScript e ka etsa opereishene e le 'ngoe feela ka nako, ha lits'ebetso tse ling li tla emela nako ea tsona ho stack ho fihlela li bitsoa.
letsetsa stack ke sebopeho sa data seo, ka mantsoe a bonolo feela, se tlalehang tlhahisoleseling mabapi le sebaka se lenaneong leo re leng ho lona. Haeba re fetela ts'ebetsong, re sutumelletsa ho kena ha eona holimo ho stack. Ha re khutla ho tsoa ts'ebetsong, re hlahisa ntho e holimo ka ho fetisisa ho tloha stack ebe re khutlela moo re bitsitseng mosebetsi. Sena ke sohle seo stack e ka se etsang. 'Me joale potso e thahasellisang haholo. Joale asynchrony e sebetsa joang ho JavasScript?
Ha e le hantle, ho phaella ho stack, li-browser li na le queue e khethehileng ea ho sebetsa le seo ho thoeng ke WebAPI. Mesebetsi e teng moleng ona e tla etsoa ka tatellano feela ka mor'a hore stack e tlosoe ka ho feletseng. Ke feela ka mor'a sena moo ba sutumetsoang ho tloha moleng ho ea holim'a mokoloko bakeng sa ho bolaoa. Haeba ho na le bonyane ntho e le 'ngoe ho stack hajoale, li ke ke tsa eketsoa ho stack. Ke hantle ka lebaka la sena hore lits'ebetso tsa ho letsetsa ka nako ea nako hangata ha li nepahale ka nako, kaha ts'ebetso ha e khone ho tloha moleng ho ea ho stack ha e ntse e tletse.
Ha re shebeng mohlala o latelang mme re qale ka ts'ebetsong ea eona mohato ka mohato. A re boneng se etsahalang tsamaisong.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Ha ho letho le etsahalang. Browser console e hlakile, mohala oa mohala ha o na letho.
2) Ebe taelo ea console.log('Hi') e eketsoa ho stack ea mohala.
3) 'Me ea phethahala
4) Ebe console.log('Hi') e tlosoa ho stack call.
5) Joale fetela ho taelo setTimeout(function cb1() {... }). E eketsoa ho stack ea call.
6) Taelo ea setTimeout(function cb1() {… }) e phethiloe. Sebatli se etsa sebali sa nako seo e leng karolo ea Web API. E tla etsa countdown.
7) Taelo ea setTimeout(function cb1() {... }) e phethile mosebetsi oa eona mme e tlositsoe ho stack call.
8) Taelo ea console.log('Bye') e eketsoa ho stack ea mohala.
9) Taelo ea console.log('Bye') e phethiloe.
10) Taelo console.log('Bye') e tlositsoe ho stack ea mehala.
11) Kamora hore bonyane 5000 ms e fete, sebali-nako sea emisa ebe se beha callback cb1 moleng oa callback.
12) Loop ea ketsahalo e nka tšebetso cb1 ho tsoa moleng oa callback ebe e e beha sethaleng sa mehala.
13) Mosebetsi oa cb1 oa phethisoa 'me o eketsa console.log('cb1') ho stack ea mohala.
14) Taelo ea console.log('cb1') e phethiloe.
15) Taelo console.log('cb1') e tlositsoe ho stack call.
16) Mosebetsi oa cb1 o tlosoa ho stack ea mohala.
Ha re shebeng mohlala ho dynamics:
Re shebile hore na asynchrony e kengoa ts'ebetsong joang ho JavaScript. Joale a re ke re bue ka bokhutšoanyane ka ho iphetola ha khoutu ea asynchronous.
Phetoho ea khoutu ea 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);
})
})
})
})
})
});Lenaneo la Asynchronous joalo ka ha re le tseba ho JavaScript le ka sebelisoa feela ka mesebetsi. Li ka fetisetsoa joaloka tse ling tse fapaneng ho ea mesebetsing e meng. Ena ke tsela eo li-callback li hlahileng ka eona. 'Me e pholile, e monate ebile e bapala, ho fihlela e fetoha masoabi, melancholy le masoabi. Hobaneng? Ho bonolo:
- Ha ho rarahana ha khoutu ho ntse ho eketseha, morero o fetoha ka potlako li-blocks tse sa bonahaleng, tse lulang li le teng khafetsa - "callback hell".
- Ho sebetsana le liphoso ho ka ba bonolo ho fosa.
- U ke ke ua khutlisa lipolelo ka ho khutlisa.
Ka ho fihla ha Tshepiso, boemo bo ile ba ntlafala hanyane.
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);
});- Ho ile ha hlaha liketane tsa tšepiso, tse ileng tsa ntlafatsa ho baloa ha khoutu
- Ho hlahile mokhoa o fapaneng oa ho tšoasa liphoso
- Ekelitse monyetla oa ts'ebetso e ts'oanang e sebelisang Tšepiso.tsohle
- Re ka rarolla li-asynchrony tse behiloeng re sebelisa async/wait
Empa litšepiso li na le mefokolo ea tsona. Ka mohlala, tšepiso e ke ke ea hlakoloa ntle le ho tantša ka moropa, ’me ntho ea bohlokoa ka ho fetisisa ke hore e sebetsa ka boleng bo le bong.
Hantle, re atametse mananeo a sebetsang hantle. O khathetse? Hantle, ka lehlohonolo, u ka ea etsa tee, u nahane ka eona 'me u khutle ho tla bala haholoanyane. Mme ke tla tswela pele.
Lenaneo le sebetsang ke paradigm ea lenaneo e shebaneng le phallo ea data le phetiso ea phetoho. Ha re shebeng ka botebo hore na data stream ke eng.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Ha re nahane hore re na le sebaka sa ho kenya letsoho. Re theha sehlopha 'me bakeng sa senotlolo se seng le se seng sa ketsahalo ea ho kenya re tla boloka ketsahalo ka har'a lethathamo la rona. Ka nako e ts'oanang, ke rata ho hlokomela hore sehlopha sa rona se hlophisoa ka nako, ke hore. lenane la liketsahalo tsa morao-rao le leholo ho feta lenane la tse fetileng. Lethathamo le joalo ke mohlala o nolofalitsoeng oa phallo ea data, empa ha e so phalle. E le hore sehlopha sena se ka bitsoa ka mokhoa o sireletsehileng molapo, se tlameha ho tseba ka tsela e itseng ba ngolisitseng hore data e ncha e fihlile ho eona. Ka hona re tla ho tlhaloso ea phallo.
Phallo ea data
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Phalla ke lethathamo la lintlha tse hlophisitsoeng ho ea ka nako tse ka bontšang hore data e fetohile. Joale nahana hore na ho bonolo hakae ho ngola khoutu eo ketso e le 'ngoe e hlokang ho bitsa liketsahalo tse' maloa likarolong tse fapaneng tsa khoutu. Re ingolisa feela ho molatsoana mme o tla re tsebisa ha liphetoho li etsahala. Mme laeborari ea RxJs e ka etsa sena.
RxJS ke laebrari ea ho sebetsa ka li-program tsa asynchronous le tse thehiloeng liketsahalong tse sebelisang tatellano e hlokomelehang. Laebrari e fana ka mofuta oa motheo E bonoangmefuta e mengata e thusang (Moshebelli, Bahlophisi, Lihlooho) le basebetsi bakeng sa ho sebetsa ka liketsahalo joalo ka likoleke ('mapa, sefa, fokotsa, e 'ngoe le e 'ngoe le tse tšoanang ho tsoa ho JavaScript Array).
A re utloisiseng lintlha tsa motheo tsa laebrari ena.
Ea hlokomelehang, Moshebelli, Moetsi
E hlokomelehang ke mofuta oa pele oa mantlha oo re tla o sheba. Sehlopha sena se na le karolo e kholo ea ts'ebetsong ea RxJs. E amahanngoa le molapo o hlokomelehang, o ka ngolisoang ho sebelisa mokhoa oa ho ngolisa.
Observable e sebelisa mokhoa oa mothusi oa ho theha liapdeite, tse bitsoang Hlokomelang. Mohloli oa boleng bakeng sa Observer o bitsoa mohlahisi. Sena e ka ba lethathamo, iterator, socket ea marang-rang, mofuta o itseng oa ketsahalo, joalo-joalo. Kahoo re ka re ho hlokomelehang ke conductor pakeng tsa Producer le Observer.
E hlokomelehang e sebetsana le mefuta e meraro ea liketsahalo tsa Observer:
- latelang - data e ncha
- phoso - phoso haeba tatelano e felile ka lebaka la mokhelo. ketsahalo ena e boetse e bolela ho phethoa ha tatellano.
- feletseng - pontšo mabapi le ho phethoa ha tatellano. Sena se bolela hore ha ho sa tla ba le data e ncha.
Ha re boneng demo:
Qalong re tla sebetsana le litekanyetso tsa 1, 2, 3, 'me ka mor'a motsotsoana o le mong. re tla fumana 1 mme re felise molapo oa rona.
Ho nahana ka lentsoe le phahameng
Eaba kea hlokomela hore ho e bua ho ne ho thahasellisa ho feta ho ngola ka eona. 😀
tshebeletso ya
Ha re ingolisa ho molatsoana re theha sehlopha se secha ho ngolisae re fang bokhoni ba ho itokolla ho sebelisa mokhoa Ikgetse ho itokolla. Re ka boela ra hlophisa lipeeletso re sebelisa mokhoa eketsa. Che, hoa utloahala hore re ka arola likhoele ka ho sebelisa tlosa. Mekhoa ea ho kenya le ho tlosa e amohela phaliso e 'ngoe e le ho kenya. Ke rata ho hlokomela hore ha re itokolla, re itokolla lipeeletsong tsohle tsa bana joalokaha eka ba bitsitse mokhoa oa ho itokolla. Tsoela pele.
Mefuta ea melapo
HOT
BOKANG
Moetsi o bōpiloe ka ntle ho bonoa
Moetsi o entsoe ka hare ho bonoa
Lintlha li fetisoa ka nako eo se bonoang se entsoeng
Lintlha li fanoa ka nako ea ho ngolisa
U hloka kelello e eketsehileng bakeng sa ho itokolla
Khoele e fela ka boyona
E sebelisa likamano tse le 'ngoe ho tse ngata
E sebelisa likamano tsa motho ka mong
Lipeeletso tsohle li na le moelelo o tšoanang
Lipeeletso li ikemetse
Lintlha li ka lahleha haeba u se na peeletso
E fana ka litekanyetso tsohle tsa phallo bakeng sa peeletso e ncha
Ho fana ka papiso, ke ne ke tla nahana ka molatsoana o chesang joaloka filimi e lebaleng la liketsahalo. Ka nako efe u fihlile, ho tloha motsotsong oo u ile ua qala ho shebella. Ke ne ke tla bapisa phallo e batang le mohala oa theknoloji. tshehetso. Motho leha e le ofe ea letsetsang o mamela rekotiloeng ea voicemail ho tloha qalong ho fihlela qetellong, empa o ka emisa ka ho itokolla.
Ke rata ho hlokomela hore ho boetse ho na le seo ho thoeng ke phallo e futhumetseng (ke kopane le tlhaloso e joalo ka seoelo haholo le feela lichabeng tse tsoang linaheng tse ling) - ena ke phallo e fetohang ho tloha ho phallo e batang ho ea ho e chesang. Potso e hlaha - moo u ka sebelisang)) Ke tla fana ka mohlala ho tloha ho itloaetsa.
Ke sebetsa le Angular. O sebelisa rxjs ka mafolofolo. Ho amohela data ho seva, ke lebeletse khoele e batang mme ke sebelise khoele ena ho template ho sebelisa asyncPipe. Haeba ke sebelisa phala ena ka makhetlo a 'maloa, joale, ha ke khutlela tlhaloso ea molapo o batang, pipe e' ngoe le e 'ngoe e tla kopa data ho tswa ho seva, e leng ntho e makatsang ho e bua. 'Me haeba ke fetola molapo o batang hore o be mofuthu, joale kopo e tla etsahala hang.
Ka kakaretso, ho utloisisa mofuta oa phallo ho thata haholo ho ba qalang, empa ho bohlokoa.
bagwebi
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Basebelisi ba re fa bokhoni ba ho holisa bokhoni ba rona ba ho sebetsa ka melapo. Ba thusa ho laola diketsahalo tse hlahang ho Tse Lemohang. Re tla sheba tse 'maloa tse tsebahalang haholo, mme lintlha tse ling mabapi le basebelisi li ka fumanoa ho sebelisoa lihokelo tse fumanehang tlhahisoleseling.
Basebelisi - ea
Ha re qaleng ka mothusi ea thusang oa. E theha e Observable ho latela boleng bo bonolo.
Basebelisi - sefa
Sefefo, joalo ka ha lebitso le fana ka maikutlo, se sefa lets'oao la molapo. Haeba opareitara e khutla 'nete, e tlola ho ea pele.
Basebelisi - nka
nka - E nka boleng ba palo ea emitters, ka mor'a moo khoele e fela.
Basebelisi - debounceTime
debounceTime - e lahla litekanyetso tse hlahisitsoeng tse oelang ka nako e behiloeng lipakeng tsa liphetho - kamora hore nako e fete, e hlahisa boleng ba ho qetela.
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)
);
Basebelisi - takeWhile
E hlahisa boleng ho fihlela takeWhile e khutlisa leshano, ka mor'a moo e itokolla ho khoele.
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 )
);
Basebelisi - kopanyaLatest
The combineLatest opareitara e batla e tšoana le tšepiso.tsohle. E kopanya likhoele tse ngata ho e le 'ngoe. Kamora hore khoele e 'ngoe le e' ngoe e hlahise bonyane tlhahiso e le 'ngoe, re fumana boleng ba morao-rao ho tsoa ho e' ngoe le e 'ngoe ka mokhoa oa lethathamo. Ho feta moo, ka mor'a tlhahiso leha e le efe e tsoang melapong e kopantsoeng, e tla fana ka litekanyetso tse ncha.
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));
Basebelisi - zip
Zip - E emela boleng ho tsoa ho khoele e 'ngoe le e 'ngoe ebe e theha sehlopha se ipapisitseng le lintlha tsena. Haeba boleng bo sa tsoe ho khoele leha e le efe, joale sehlopha se ke ke sa thehoa.
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));
Basebelisi - forkJoin
forkJoin e boetse e kopanya likhoele, empa e hlahisa boleng feela ha likhoele tsohle li felile.
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);
Basebelisi - 'mapa
Opereishene ea phetoho ea 'mapa e fetola boleng ba emitter ho e ncha.
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)
);
Basebelisi - arolelana, tlanya
Thepa ea pompo e u lumella ho etsa litla-morao, ke hore, ketso efe kapa efe e sa ameng tatellano.
Mosebetsi oa share utility o ka fetola molapo o batang hore o be o chesang.
Re qetile ka li-operators. Ha re feteleng ho Sehlooho.
Ho nahana ka lentsoe le phahameng
Eaba ke ea noa tee. Ke khathetse ke mehlala ena 😀
Lelapa la sehlooho
Lelapa la sehlooho ke mohlala o ka sehloohong oa phallo e chesang. Lihlopha tsena ke mofuta oa lebasetere o sebetsang ka nako e le 'ngoe e le motho ea hlokomelehang le ea shebeletseng. Kaha taba ke khoele e chesang, ho hlokahala hore u itokolle ho eona. Haeba re bua ka mekhoa ea mantlha, joale ke tsena:
- latelang - ho fetisetsa data e ncha ho molapo
- phoso - phoso le ho emisa khoele
- ho phetheha - ho phethoa ha khoele
- ngolisa – ingolisa ho molatsoana
- itokolle - itokolle ho tsoa molatsoaneng
- asObservable - fetoha moshebelli
- toPromise - e fetoha tshepiso
Ho na le mefuta e 4 5 ea lithuto.
Ho nahana ka lentsoe le phahameng
Ho ne ho e-na le batho ba 4 ba neng ba bua molapong, empa ho ile ha fumaneha hore ba ekelitse e mong hape. Joalo ka ha ba bolela, phela 'me u ithute.
Sehlooho se Bonolo new Subject()– mofuta o bonolo oa lithuto. E entsoe ntle le litekanyetso. E fetisa litekanyetso tse amoheloang feela ka mor'a ho ngolisa.
Boitšoaro Sehlooho new BehaviorSubject( defaultData<T> ) - ka maikutlo a ka, mofuta o tloaelehileng oa taba. Kenyelletso e nka boleng ba kamehla. Kamehla e boloka data ea tokollo ea ho qetela, e fetisoang ha u ngolisa. Sehlopha sena se boetse se na le mokhoa oa bohlokoa oa boleng, o khutlisetsang boleng ba hona joale ba molapo.
ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - Kenyelletso ka boikhethelo e ka nka e le khang ea pele boholo ba "buffer" ea boleng boo e tla bo boloka ka boeona, 'me ea bobeli ke nako eo ka eona re hlokang liphetoho.
AsyncSubject new AsyncSubject() - ha ho letho le etsahalang ha u ngolisa, 'me boleng bo tla khutlisetsoa feela ha bo phethiloe. Ke boleng ba ho qetela feela ba molapo o tla khutlisoa.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Litokomane ha li bue ka eena 'me ke qala ho mo bona. Haeba ho na le ea tsebang seo a se etsang, ka kopo ngola 'me re tla e eketsa.
Phew. Che, re koahetse tsohle tseo ke neng ke batla ho u bolella tsona kajeno. Ke tšepa hore boitsebiso bona bo bile molemo. U ka ipalla lethathamo la litšupiso ka bouena ho tab ea tlhahisoleseling e sebetsang.
tshedimosetso e le mosola
Source: www.habr.com