Talofa uma. Sergey Omelnitsky o lo'o feso'ota'i. E leʻi leva talu ai na ou talimalo ai i se vaitafe i luga o polokalame faʻaalia, lea na ou talanoa ai e uiga i le asynchrony i le JavaScript. O le asō ou te manaʻo e tusi ni faʻamatalaga i lenei mea.
Ae a o leʻi amataina le mataupu autū, e manaʻomia ona tatou faia se faamatalaga tomua. Se'i o tatou amata i fa'auigaga: o le a le fa'aputuga ma le laina?
Fa'aputu ose fa'aputuga o ona elemene e maua i luga ole fa'avae mulimuli-i totonu, muamua-i fafo LIFO
Liliu ose fa'aputuga o ona elemene e maua i luga ole fa'avae muamua-i totonu, fa'aulufale muamua ole FIFO
Lelei, tatou fa'aauau.
O le JavaScript o se gagana fa'apolokalame e tasi le filo. O lona uiga e na'o le tasi le filo o le fa'atinoga ma le fa'aputuga e tasi o lo'o fa'atulaga ai galuega mo le fa'atinoina. O le mea lea, e mafai e le JavaScript ona fa'atino na'o le tasi le gaioiga i le taimi, a'o isi fa'agaioiga o le a fa'atali lo latou taimi i luga o le fa'aputuga se'ia vala'auina.
Valaau faaputuga o se fa'amaumauga fa'amaumauga lea, faigofie lava, fa'amaumau fa'amatalaga e uiga i le nofoaga i le polokalame o lo'o tatou i ai. Afai tatou te pasi atu i se galuega, tatou te tuleia lona ulufale i le pito i luga o le faaputuga. A matou toe foʻi mai se galuega, matou te faʻapipiʻi le elemene pito i luga mai le faaputuga ma faʻauʻu i tua i le mea na matou taʻua o le galuega. Pau lava le mea e mafai e le fa'aputuga ona fai. Ma o lenei o se fesili sili ona manaia. E faʻafefea la ona galue le asynchrony i JavasScript?
O le mea moni, i le faʻaopoopoga i le faaputuga, o loʻo i ai i tagata suʻesuʻe se laina faʻapitoa mo le galulue ai ma le mea e taʻua o WebAPI. O galuega o lo'o i totonu o lenei fa'asologa o le a fa'atinoina i le fa'atonuga pe a uma ona kilia atoa le fa'aputuga. Na'o le mae'a lea ona tulei mai le laina i luga o le fa'aputuga mo le fa'atinoina. Afai ei ai le itiiti ifo ma le tasi le elemene i luga o le faaputuga i le taimi nei, ona le mafai lea ona faaopoopo i le faaputuga. O le mea tonu lava lea o le vala'au galuega e ala i le taimi fa'agata e masani ona le sa'o i le taimi, talu ai o le galuega e le mafai ona maua mai le laina i le faaputuga a'o tumu.
Se'i o tatou va'ai i le fa'ata'ita'iga o lo'o mulimuli mai ma amata i lona fa'atinoga o lea la'asaga ma lea la'asaga. Se'i o tatou va'ai fo'i po'o le a le mea e tupu ile faiga.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) E leai se mea o tupu. O lo'o manino le fa'amafanafanaga o su'esu'ega, o lo'o gaogao le fa'aputuga telefoni.
2) Ona faaopoopo lea o le command console.log('Hi') i le faaputuga valaau.
3) Ma ua faataunuuina
4) Ona aveese lea o le console.log('Hi') mai le faaputuga telefoni.
5) Fa'agasolo nei i le poloaiga setTimeout(galuega cb1() {... }). Ua faaopoopo i le faaputuga valaau.
6) O le setiTimeout(galuega cb1() {… }) ua fa'atinoina. O le su'esu'ega e faia se taimi o se vaega o le Web API. O le a faia se faitauga i lalo.
7) O le setiTimeout(function cb1() {... }) poloaiga ua maeʻa lana galuega ma ua aveese mai le faaputuga telefoni.
8) O le command console.log('Bye') ua fa'aopoopoina ile fa'aputuga telefoni.
9) O le fa'atonuga console.log('Bye') ua fa'atinoina.
10) Ua aveese le command console.log('Bye') mai le faaputuga valaau.
11) A maeʻa le 5000 ms, faʻamutaina le taimi ma tuʻu le callback cb1 i le laina telefoni.
12) O le mea na tupu e ave le cb1 mai le laina telefoni ma tuʻu i luga o le faaputuga telefoni.
13) Galuega cb1 ua fa'atinoina ma fa'aopoopo le console.log('cb1') i le fa'aputuga telefoni.
14) O le command console.log('cb1') ua fa'atinoina.
15) O le command console.log('cb1') ua aveese mai le faaputuga telefoni.
16) Galuega cb1 ua aveesea mai le faaputuga valaau.
Se'i o tatou va'ai i se fa'ata'ita'iga i dynamics:
Ia, na matou vaʻavaʻai i le faʻaogaina o le asynchrony i le JavaScript. Se'i o tatou talanoa fa'apuupuu e uiga i le fa'aleleia o le code asynchronous.
Le fa'aleleia o le code 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);
})
})
})
})
})
});Asynchronous polokalame e pei ona tatou iloa i le JavaScript e mafai ona faʻatinoina e ala i galuega. E mafai ona pasi e pei o isi fesuiaiga i isi galuega. O le ala lea na fanau mai ai toe fo'i. Ma e manaia, malie ma taʻalo, seia oʻo ina liua i le faʻanoanoa, faʻanoanoa ma le faʻanoanoa. Aisea? E faigofie:
- A'o fa'atupula'ia le lavelave o le fa'ailoga, o le poloketi e vave ona liua i ni poloka le mautonu, fa'asolosolo fa'apipi'i - "callback hell".
- E mafai ona faigofie ona misia le taulimaina o mea sese.
- E le mafai ona e toe fa'afo'i fa'amatalaga ma toe fo'i.
I le oo mai o le Folafolaga, na faasolo ina lelei teisi le tulaga.
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);
});- Na aliali mai filifili o folafolaga, lea na faʻaleleia atili ai le faitauina o tulafono
- Ua aliali mai se auala ese mo le pu'eina o mea sese
- Faʻaopoopo le avanoa e faʻaoga tutusa ai le faʻaaogaina o Promise.all
- E mafai ona matou foia asynchrony nested e faʻaaoga ai le async/faatali
Ae o folafolaga e iai ona tapulaa. Mo se faʻataʻitaʻiga, e le mafai ona faʻaleaogaina se folafolaga e aunoa ma le siva ma se topa, ma o le mea e sili ona taua o le aoga i le tasi le tau.
Ia, ua tatou fa'agasolo malie atu i polokalame fa'afoliga. Lelavā? Ia, laki, e mafai ona e alu e fai se lauti, mafaufau i ai ma toe sau e faitau atili. Ma o le a ou faaauau.
Polokalama fa'afoliga ose fa'ata'ita'iga fa'apolokalame e fa'atatau ile tafega o fa'amaumauga ma suiga fa'asalalau. Se'i o tatou va'ava'ai toto'a po'o le a le fa'asologa o fa'amaumauga.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Se'i fa'apea o lo'o i ai sau avanoa fa'aoga. O lo'o matou fatuina se fa'asologa ma mo keyup uma o le fa'aoga mea na tutupu o le a matou teuina le mea na tupu i la matou fa'asologa. I le taimi lava e tasi, ou te fia maitauina o la matou faʻasologa e faʻavasegaina i le taimi, i.e. o le faasinoupu o mea na tutupu mulimuli ane e sili atu nai lo le faasinoupu o mea na muamua atu. O sea fa'asologa o se fa'ata'ita'iga fa'afaigofie o se fa'asologa o fa'amatalaga, ae e le'i o'o i se tafega. Ina ia mafai ona faʻaigoaina ma le saogalemu lenei faʻasologa o se vaitafe, e tatau ona mafai ona logoina le au fai saofaga ua oʻo mai faʻamatalaga fou i totonu. Ona tatou oo mai lea i le faauigaga o le tafe.
Fa'asalalau fa'amaumauga
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Tafe o se fa'asologa o fa'amaumauga e fa'avasega i le taimi e mafai ona fa'ailoa mai ai ua suia fa'amaumauga. Va'ai faalemafaufau i le faigofie e tusi ai le code lea e mana'omia ai e se tasi gaioiga le vala'au i ni mea e tutupu i vaega eseese o le code. Na'o le matou lesitala i le vaitafe ma o le a logoina i matou pe a tutupu suiga. Ma e mafai e le faletusi RxJs ona faia lenei mea.
RxJS ose faletusi mo le galulue faatasi ma polokalame asynchronous ma mea e tutupu e faʻaaoga ai faʻasologa mataʻituina. O le faletusi e maua ai se ituaiga faavae Maitauina, tele ituaiga ausilali (Observer, Schedulers, Mataupu) ma fa'alapotopotoga mo le galulue fa'atasi ma fa'alavelave e pei o fa'aputuga (faafanua, faamama, faaitiitia, uma ma mea faapena mai le JavaScript Array).
Sei o tatou malamalama i manatu faavae o lenei faletusi.
Mata'ituina, Mata'ituina, Tufuga
Observable o le ituaiga muamua lea o le a tatou tilotilo i ai. O lenei vasega o loʻo i ai le vaega autu o le faʻatinoga o le RxJs. E fesoʻotaʻi ma se vaitafe mataʻituina, lea e mafai ona lesitala i le faʻaaogaina o le auala o le lesitala.
Observable faʻaaogaina se fesoasoani fesoasoani mo le fatuina o faʻafouga, le mea e taʻua Observer. O le puna o tau mo le Observer e taʻua tagata gaosi. E mafai ona avea lenei mea ma se faʻasologa, faʻataʻitaʻiga, socket web, nisi ituaiga o mea na tupu, ma isi. O lea e mafai ai ona tatou fai atu o le vaʻaia o se taʻitaʻi i le va o le Producer ma Observer.
Observable e fa'atautaia ituaiga e tolu o mea tutupu a le Observer:
- soso'o - fa'amatalaga fou
- sese - o se mea sese pe a uma le faasologa ona o se tuusaunoaga. o lenei mea na tupu e faʻaalia ai foi le maeʻa o le faʻasologa.
- maeʻa - faʻailoga e uiga i le maeʻa o le faʻasologa. O lona uiga e le toe iai ni fa'amatalaga fou.
Se'i tatou va'ai i le fa'aaliga:
I le amataga o le a matou faʻagasolo tulaga taua 1, 2, 3, ma a maeʻa le 1 sekone. o le a tatou maua 4 ma faaiʻu la tatou vaitafe.
Mafaufau leotele
Ona ou iloa ai lea o le tauina atu e sili atu le manaia nai lo le tusitusi e uiga i ai. 😀
lāfoga
A matou lesitala i se vaitafe matou te fatuina se vasega fou saofagalea tatou te maua ai le tomai e unsubscribe e faaaoga ai le metotia le faʻamalo. E mafai fo'i ona matou fa'avasega fa'atasiga e fa'aaoga ai le metotia faʻaopoopo. Ia, e talafeagai e mafai ona tatou faʻavasegaina filo e faʻaaoga aveese. O auala fa'aopoopo ma aveese e talia se isi fa'asoa e fai ma fa'aulufalega. Ou te fia maitauina pe a matou le faʻamaonia, matou te le faʻamaonia mai le lesitalaina o tamaiti uma e pei na latou taʻua le auala e le faʻamaonia. Fai loa.
Ituaiga vaitafe
vevela
Faʻaalia
O le gaosiga e faia i fafo e mafai ona matauina
O le gaosiga e faia i totonu e mafai ona matauina
E fa'aliliuina fa'amatalaga i le taimi na faia ai le va'aiga
E tu'uina atu fa'amatalaga i le taimi o le lesitala
Mana'omia se manatu fa'aopoopo mo le le fa'amauina
E muta lava le filo
Fa'aaogaina se mafutaga tasi-i-tele
Fa'aaogaina se mafutaga tasi-i-tasi
O saofaga uma e tutusa lona uiga
O fa'amaumauga e tuto'atasi
E mafai ona leiloa fa'amatalaga pe a leai sau sau saini
Toe tu'uina atu tau fa'asoa uma mo se saofaga fou
Ina ia tuuina atu se tala faatusa, ou te mafaufau i se vaitafe vevela e pei o se ata tifaga i se fale tifaga. O le a le taimi o le taimi na e taunuu ai, mai lena taimi na e amata matamata ai. Ou te faʻatusatusaina se tafe malulu i se telefoni i tekinolosi. lagolago. So'o se tagata e vala'au e fa'afofoga i le lipine leo mai le amataga e o'o i le fa'ai'uga, ae e mafai ona e tautau i lalo e fa'aaoga le unsubscribe.
Ou te fia maitauina o loʻo i ai foʻi mea e taʻua o le mafanafana (ua ou oʻo i lenei faʻamatalaga e seasea lava ma naʻo totonu o nuʻu mai fafo) - o se tafe lea e suia mai le malulu i le vevela. O le fesili e tulaʻi mai - o fea e faʻaoga)) O le a ou tuʻuina atu se faʻataʻitaʻiga mai le faʻataʻitaʻiga.
O loʻo ou galue ma Angular. Na te faʻaaogaina le rxjs. Ina ia maua faʻamatalaga i le 'auʻaunaga, ou te faʻamoemoeina se filo malulu ma faʻaoga lenei filo i le faʻataʻitaʻiga e faʻaaoga ai le asyncPipe. Afai ou te faʻaaogaina lenei paipa i le tele o taimi, ona toe foʻi mai lea i le faʻamatalaga o se vaitafe malulu, o paipa taʻitasi o le a talosagaina faʻamatalaga mai le server, lea e ese le fai mai. Ma afai ou te liua se vaitafe malulu i se mafanafana, ona tupu ai lea o le talosaga i le tasi.
I se tulaga lautele, o le malamalama i le ituaiga o tafe e fai si faigata mo tagata amata, ae taua.
e faagaoioia
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);O lo'o tu'uina mai e le aufaipisinisi ia i matou le tomai e fa'alautele ai lo matou agava'a e galulue ai ma vaitafe. Latou te fesoasoani e pulea mea e tutupu i le Observable. O le a tatou vaʻavaʻai i nisi o mea sili ona lauiloa, ma sili atu faʻamatalaga e uiga i le au faʻatautaia e mafai ona maua i le faʻaogaina o fesoʻotaʻiga i faʻamatalaga aoga.
Fa'atonu - o
Tatou amata i le ausilali faafoe o. E fausia ai se Observable e fa'avae i luga o se tau faigofie.
Fa'atonu - faamama
O le tagata faʻapipiʻi, e pei ona taʻu mai e le igoa, e faʻamama le faailo o le vaitafe. Afai e sa'o le fa'afo'i mai e le fa'afoe, e fa'ase'e atili.
Fa'atonu - ave
ave - Ave le tau o le numera o emitters, ina ua uma le filo.
Fa'atonu - debounceTime
debounceTime - lafoa'i mea taua e pa'u i totonu o le va'aiga taimi fa'apitoa i le va o galuega fa'atino - a mae'a le va'aiga taimi, fa'aulu le tau mulimuli.
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)
);
Fa'atonu - takeWhile
Emiti tau seʻia oʻo i le aveWhile toe faʻafoʻi sese, a maeʻa ona le faʻamaonia mai le filo.
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 )
);
Operators - combineLatest
O le combineLatest operator e foliga tutusa ma promise.all. E tu'ufa'atasia ni filo se tele i le tasi. A maeʻa ona faia e filo taʻitasi ia le itiiti ifo ma le tasi le faʻamalo, matou te maua le tau sili ona lata mai mai taʻitasi i foliga o se laina. E le gata i lea, pe a maeʻa soʻo se faʻamalo mai vaitafe tuʻufaʻatasia, o le a maua ai ni tau fou.
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));
Fa'atonu - zip
Zip - Faʻatali mo se tau mai filo taʻitasi ma fai se faʻasologa e faʻavae i luga o nei tau. Afai e le sau le tau mai soʻo se filo, ona le faʻavaeina lea o le vaega.
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));
Fa'atonu - forkJoin
O le forkJoin e faʻapipiʻi foʻi filo, ae naʻo le faʻaalia o se tau pe a maeʻa uma filo.
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);
Fa'atonu - fa'afanua
O le fa'aliliuga fa'afanua e fa'aliliuina le tau emitter i se mea fou.
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)
);
Fa'atonu – faasoa, tap
O le tap operator e faʻatagaina oe e fai aʻafiaga, o lona uiga, soʻo se gaioiga e le afaina ai le faʻasologa.
E mafai e le fa'alapotopotoga fa'asoa fa'asoa ona liliu se vai malulu i se vai vevela.
Ua uma a matou fa'atautaia. Sei o tatou agai atu i le Mataupu.
Mafaufau leotele
Ona ou alu lea e inu lauti. Ua ou fiu i nei faataitaiga 😀
Aiga mataupu
O le mataupu aiga o se fa'ata'ita'iga sili o tafega vevela. O nei vasega o se ituaiga o hybrid e galue i le taimi e tasi e pei o le mataʻituina ma le matau. Talu ai ona o le mataupu o se filo vevela, e tatau ona aveese mai ai. Afai tatou te talanoa e uiga i metotia autu, o mea nei:
- soso'o - fa'aliliuina o fa'amatalaga fou i le vaitafe
- sese - sese ma le faamutaina o filo
- mae'a - mae'a o le filo
- lesitala – lesitala i se vaitafe
- fa'amavaega - fa'amavae mai le vaitafe
- asObservable – liua i se tagata matau
- i le Folafolaga – liua i se folafolaga
E 4 5 ituaiga o mataupu.
Mafaufau leotele
E to'a 4 tagata o lo'o talanoa i luga o le vaitafe, ae na fa'aopoopoina le isi. E pei ona latou fai mai, ola ma aoao.
Mataupu Faigofie new Subject()- o le ituaiga sili ona faigofie o mataupu. Faia e aunoa ma ni tapula'a. Tu'u atu tau e maua pe a uma le fa'asoa.
Amioga Mataupu new BehaviorSubject( defaultData<T> ) - i loʻu manatu, o le ituaiga sili ona taatele o mataupu. O le fa'aoga e ave le tau fa'aletonu. Fa'asaoina i taimi uma fa'amatalaga o le lomiga mulimuli, lea e tu'uina atu pe a lesitala. O lenei vasega o loʻo i ai foi se auala aoga aoga, lea e toe faʻafoʻi ai le tau o le vaitafe.
Toe ta'alo Mataupu new ReplaySubject(bufferSize?: number, windowTime?: number) - O le faʻaoga e mafai ona filifili e fai ma finauga muamua le tele o le paʻu o tau o le a teuina i totonu ia te ia lava, ma o le lona lua o le taimi tatou te manaʻomia ai suiga.
AsyncMataupu new AsyncSubject() — e leai se mea e tupu pe a lesitala, ma o le a toe faafoi le tau pe a maeʻa. Na'o le tau mulimuli o le vaitafe o le a toe fa'afo'i.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - O faʻamaumauga e le leoa e uiga ia te ia ma o loʻo ou vaʻai ia te ia mo le taimi muamua. Afai e iloa e se tasi le mea na te faia, faʻamolemole tusi mai ma o le a matou faʻaopoopoina.
Fiu. Ia, ua uma ona matou ufiufi mea uma ou te manaʻo e taʻu atu ia te oe i le aso. Ou te faʻamoemoe sa aoga lenei faʻamatalaga. E mafai ona e faitauina le lisi o faʻamatalaga e oe lava i le faʻamatalaga faʻamatalaga aoga.
faamatalaga aoga
puna: www.habr.com