Halo sadayana. Sergey Omelnitsky aya hubunganana. Teu lila pisan kuring hosted aliran on programming réaktif, dimana kuring dikaitkeun asynchrony di JavaScript. Dinten ieu abdi hoyong nyandak catetan dina bahan ieu.
Tapi sateuacan urang ngamimitian materi utama, urang kedah ngadamel catetan bubuka. Janten hayu urang mimitian ku definisi: naon tumpukan sareng antrian?
Tumpukan nyaéta kumpulan anu unsur-unsurna dicandak dina dasar LIFO, mimitina-kaluar
Ngalieuk nyaéta kumpulan anu unsur-unsurna dimeunangkeun dina dasar FIFO mimiti asup, kaluar heula
Oké, hayu urang neruskeun.
JavaScript mangrupakeun basa programming single-threaded. Ieu ngandung harti yén ngan aya hiji thread palaksanaan na hiji tumpukan on nu fungsi anu antrian pikeun palaksanaan. Ku alatan éta, JavaScript ngan bisa ngalakukeun hiji operasi dina hiji waktu, bari operasi séjén bakal ngantosan giliran maranéhanana dina tumpukan nepi ka disebut.
Telepon tumpukan mangrupa struktur data anu, kantun nempatkeun, rékaman informasi ngeunaan tempat dina program dimana urang aya. Lamun urang lulus kana fungsi, urang nyorong entri na ka luhur tumpukan éta. Nalika urang balik ti fungsi hiji, urang pop unsur paling luhur ti tumpukan jeung mungkas nepi deui dimana urang disebut fungsi. Ieu kabeh nu tumpukan bisa ngalakukeun. Sareng ayeuna patarosan anu pikaresepeun pisan. Kumaha teras asynchrony dianggo dina JavasScript?
Kanyataanna, sajaba tumpukan, browser boga antrian husus pikeun gawé bareng nu disebut WebAPI. Fungsi dina antrian ieu bakal dieksekusi dina urutan ngan sanggeus tumpukan tos rengse diberesihan. Ngan sanggeus ieu aranjeunna kadorong tina antrian onto tumpukan pikeun palaksanaan. Lamun aya sahanteuna hiji unsur dina tumpukan di momen, lajeng maranéhna teu bisa ditambahkeun kana tumpukan éta. Éta pisan sababna naha nelepon fungsi ku timeout mindeng teu tepat waktu, saprak fungsi nu teu bisa meunang ti antrian ka tumpukan bari pinuh.
Hayu urang tingali conto di handap ieu sareng ngamimitian palaksanaan léngkah-léngkahna. Hayu urang ogé ningali naon anu lumangsung dina sistem.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Euweuh kajadian acan. Konsol browser jelas, tumpukan panggero kosong.
2) Lajeng paréntah console.log ('Hai') ditambahkeun kana tumpukan panggero.
3) Sarta eta kaeusi
4) Lajeng console.log ( 'Hai') dipiceun tina tumpukan panggero.
5) Ayeuna ngaléngkah ka paréntah setTimeout(fungsi cb1() {…}). Ieu ditambahkeun kana tumpukan panggero.
6) Paréntah setTimeout(fungsi cb1() {…}) dieksekusi. Browser nyiptakeun timer anu mangrupa bagian tina Web API. Bakal ngalakukeun undur mundur.
7) Paréntah setTimeout (fungsi cb1 () {...}) geus réngsé karyana sarta dipiceun tina tumpukan panggero.
8) Paréntah console.log ('Bye') ditambahkeun kana tumpukan panggero.
9) Paréntah console.log ('Bye') dieksekusi.
10) Paréntah console.log ('Bye') dipiceun tina tumpukan panggero.
11) Saatos sahenteuna 5000 mdet kaliwat, timer terminates sarta nempatkeun callback cb1 dina antrian callback.
12) The loop acara nyandak fungsi cb1 tina antrian callback sarta nempatkeun eta dina tumpukan panggero.
13) Fungsi cb1 dieksekusi sareng nambihan console.log ('cb1') kana tumpukan panggero.
14) Paréntah console.log ('cb1') dieksekusi.
15) Paréntah console.log ('cb1') dipiceun tina tumpukan panggero.
16) Fungsi cb1 dipiceun tina tumpukan panggero.
Hayu urang nempo conto dina dinamika:
Nya, urang ningali kumaha asynchrony dilaksanakeun dina JavaScript. Ayeuna hayu urang ngobrol sakeudeung ngeunaan évolusi kode Asynchronous.
Évolusi kode 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);
})
})
})
})
})
});programming Asynchronous sakumaha urang terang eta dina JavaScript ngan bisa dilaksanakeun ku fungsi. Éta bisa diliwatan kawas variabel séjén pikeun fungsi séjén. Ieu kumaha callbacks dilahirkeun. Tur éta tiis, senang jeung playful, nepi ka robah jadi sedih, Melancholy jeung sedih. Naha? Ieu basajan:
- Salaku pajeulitna kode naek, proyék gancang robah jadi jelas, sababaraha kali nested blok - "callback naraka".
- Penanganan kasalahan tiasa gampang kantun.
- Anjeun teu bisa balik ekspresi kalawan mulang.
Kalayan datangna Jangji, kaayaan janten langkung saé.
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);
});- Ranté jangji muncul, anu ningkatkeun kabacaan kode
- Métode anu misah pikeun nangkep kasalahan parantos muncul
- Ditambahkeun kamungkinan palaksanaan paralel ngagunakeun Promise.all
- Urang tiasa ngajawab asynchrony nested maké async / await
Tapi janji boga watesan maranéhanana. Contona, hiji jangji teu bisa dibatalkeun tanpa tari jeung rebana, sarta naon pangpentingna nyaéta yén gawéna kalayan hiji nilai.
Nya, kami parantos ngadeukeutan program réaktif. capé? Muhun, untungna, anjeun bisa balik nyieun sababaraha tea, pikir ngeunaan eta sarta datang deui pikeun maca leuwih lengkep. Sarta kuring baris nuluykeun.
programming réaktif mangrupakeun paradigma programming fokus kana aliran data sarta rambatan robah. Hayu urang tingali langkung caket kana naon aliran data.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Hayu urang ngabayangkeun yen urang boga widang input. Kami nyieun hiji Asép Sunandar Sunarya jeung unggal keyup sahiji acara input urang bakal nyimpen acara di Asép Sunandar Sunarya kami. Dina waktos anu sami, abdi hoyong dicatet yén Asép Sunandar Sunarya kami diurutkeun dumasar kana waktu, i.e. indéks kajadian engké leuwih gede dibandingkeun indéks saméméhna. Asép Sunandar Sunarya sapertos mangrupikeun modél saderhana tina aliran data, tapi éta henteu acan janten aliran. Supados Asép Sunandar Sunarya ieu aman disebut stream a, éta kudu bisa kumaha bae ngawartosan palanggan yén data anyar geus anjog di dinya. Ku kituna urang datang ka harti aliran.
Aliran data
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Aliran mangrupa Asép Sunandar Sunarya data diurutkeun dumasar waktu nu bisa nunjukkeun yén data geus robah. Ayeuna bayangkeun kumaha merenah pikeun nulis kode nu hiji aksi merlukeun nelepon sababaraha acara dina bagian nu sejen kode. Kami ngan ukur ngalanggan aliran éta sareng éta bakal ngabéjaan kami nalika aya parobihan. Sareng perpustakaan RxJs tiasa ngalakukeun ieu.
RxJS mangrupa perpustakaan pikeun gawé bareng program Asynchronous sarta dumasar-kajadian ngagunakeun runtuyan observasi. Perpustakaan nyadiakeun tipe dasar Dititénan, sababaraha jenis bantu (Observer, Penjadwal, Subjek) sareng operator pikeun damel sareng acara sapertos koleksi (peta, nyaring, ngurangan, unggal jeung nu sarupa ti JavaScript Array).
Hayu urang ngartos konsép dasar perpustakaan ieu.
Observable, Observer, Produser
Observable mangrupikeun jinis dasar anu munggaran anu bakal urang tingali. Kelas ieu ngandung bagian utama palaksanaan RxJs. Éta pakait sareng aliran anu tiasa ditingali, anu tiasa dilanggan nganggo metode langganan.
Observable implements mékanisme nulungan pikeun nyieun apdet, nu disebut panitén. Sumber nilai pikeun Observer disebut nu ngasilkeun. Ieu bisa mangrupa Asép Sunandar Sunarya, iterator, stop kontak web, sababaraha jenis acara, jsb. Jadi bisa disebutkeun yén observable mangrupa konduktor antara Produser jeung Observer.
Observable nanganan tilu jinis acara Observer:
- salajengna - data anyar
- kasalahan - kasalahan lamun runtuyan réngsé alatan iwal. acara ieu ogé ngakibatkeun parantosan runtuyan.
- lengkep - sinyal ngeunaan parantosan runtuyan. Ieu ngandung harti yén moal aya deui data anyar.
Hayu urang tingali demo:
Dina awalna urang bakal ngolah nilai 1, 2, 3, sareng saatos 1 detik. urang bakal meunang 4 sarta mungkas stream kami.
Dipikir-pikir
Teras kuring sadar yén nyarioskeun éta langkung narik tibatan nyerat perkawis éta. 😀
langganan
Nalika urang ngalanggan aliran a urang nyieun kelas anyar langganannu masihan kami kamampuhan pikeun unsubscribe ngagunakeun métode unsubscribe. Urang ogé tiasa ngakelompokkeun langganan nganggo metodeu nambah. Nya, logis yén urang tiasa ngasingkeun benang nganggo mindahkeun. Metode tambihan sareng cabut nampi langganan sanés salaku input. Abdi hoyong dicatet yén nalika urang unsubscribe, urang unsubscribe tina sagala langganan anak saolah-olah maranéhna geus disebut metoda unsubscribe. Lajengkeun.
Jenis aliran
panas
EMAS
Produser dijieun di luar observasi
Produser dijieun di jero observasi
Data ditransferkeun nalika observasi dijieun
Data disayogikeun dina waktos langganan
Peryogi logika tambahan pikeun unsubscribe
Utas terminates sorangan
Ngagunakeun hubungan hiji-ka-loba
Ngagunakeun hubungan hiji-ka-hiji
Kabéh langganan boga harti sarua
Langganan mandiri
Data tiasa leungit upami anjeun henteu gaduh langganan
Reissues sadaya nilai stream pikeun langganan anyar
Pikeun masihan analogi, abdi bakal mikir aliran panas salaku pilem dina téater. Iraha waktos anjeun sumping, ti waktos éta anjeun mimiti ningali. Abdi ngabandingkeun aliran tiis kana telepon téknologi. rojongan. Sakur nu nelepon ngadangukeun rékaman suratsora ti mimiti nepi ka rengse, tapi anjeun bisa ngagantung up maké unsubscribe.
Abdi hoyong perhatikeun yén aya ogé anu disebut aliran haneut (Kuring parantos mendakan definisi ieu jarang pisan sareng ngan ukur di komunitas asing) - ieu mangrupikeun aliran anu ngarobih tina aliran tiis kana aliran panas. Patarosan timbul - dimana nganggo)) Kuring bakal masihan conto tina prakték.
Abdi damel sareng Angular. Anjeunna aktip ngagunakeun rxjs. Pikeun nampa data ka server, Kuring nyangka thread tiis tur ngagunakeun thread ieu dina citakan maké asyncPipe. Upami kuring nganggo pipa ieu sababaraha kali, teras, uih deui kana definisi aliran tiis, unggal pipa bakal nyuhunkeun data ti server, anu anéh nyarios sahenteuna. Sareng upami kuring ngarobih aliran tiis kana anu haneut, maka pamundutna bakal kajantenan sakali.
Sacara umum, ngartos jenis aliran cukup hésé pikeun beginners, tapi penting.
operator
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Operator masihan kami kamampuan pikeun dilegakeun kamampuan kami pikeun damel sareng aliran. Aranjeunna ngabantosan ngontrol kajadian anu aya dina Observable. Urang bakal ningali sababaraha anu pang populerna, sareng langkung rinci ngeunaan operator tiasa dipendakan nganggo tautan dina inpormasi anu mangpaat.
Operator - tina
Hayu urang mimitian ku operator bantu tina. Éta nyiptakeun Observable dumasar kana nilai anu sederhana.
Operator - saringan
Operator filter, sakumaha ngaranna nunjukkeun, nyaring sinyal stream. Lamun operator balik leres, eta skips salajengna.
Operator - nyandak
nyokot - Nyandak nilai jumlah emitters, nu satutasna thread ends.
Operator - debounceTime
debounceTime - miceun nilai-nilai anu dipancarkeun dina interval waktu anu ditangtukeun antara kaluaran - saatos interval waktosna, ngaluarkeun nilai terakhir.
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)
);
Operator - takeWhile
Emits nilai dugi takeWhile mulih palsu, nu satutasna unsubscribes tina thread.
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 )
);
Operator - combineLatest
The combineLatest operator rada sarupa promise.all. Ieu ngagabungkeun sababaraha threads kana hiji. Saatos unggal utas ngadamel sahenteuna hiji émisi, urang nampi nilai panganyarna tina masing-masing dina bentuk array. Salajengna, saatos émisi tina aliran anu dihijikeun, éta bakal masihan nilai énggal.
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));
Operator - zip
Zip - Ngadagoan nilai tina unggal thread sarta ngabentuk hiji Asép Sunandar Sunarya dumasar kana nilai ieu. Upami nilaina henteu asalna tina benang naon waé, maka grup éta moal kabentuk.
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));
Operator - forkJoin
forkJoin ogé ngagabung threads, tapi ngan emits a nilai lamun sakabeh threads geus réngsé.
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);
Operator - peta
Operator transformasi peta ngarobah nilai emitor jadi nu anyar.
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)
);
Operator - bagikeun, ketok
Operator ketok ngamungkinkeun anjeun pikeun ngalakukeun efek samping, nyaéta, tindakan naon waé anu henteu mangaruhan urutan.
Operator utilitas dibagikeun tiasa ngarobih aliran tiis janten aliran panas.
Kami parantos réngsé sareng operator. Hayu urang ngaléngkah ka Subject.
Dipikir-pikir
Terus kuring indit nginum tea. Bosen ku conto ieu 😀
Kulawarga subjek
Kulawarga subjek mangrupikeun conto utama aliran panas. Kelas-kelas ieu mangrupikeun jinis hibrida anu bertindak sakaligus salaku observable sareng observer. Kusabab subjek mangrupikeun topik anu panas, anjeun kedah ngabatalkeun langganan éta. Lamun urang ngobrol ngeunaan métode utama, ieu téh:
- salajengna - mindahkeun data anyar kana aliran
- kasalahan - kasalahan sarta terminasi thread
- lengkep - parantosan thread
- ngalanggan - ngalanggan stream a
- unsubscribe - unsubscribe ti stream
- asObservable - robah jadi observer
- toPromise - transforms kana jangji
Aya 4 5 jenis mata pelajaran.
Dipikir-pikir
Aya 4 urang ngobrol dina aliran, tapi tétéla maranéhna ditambahkeun hiji deui. Sakumaha aranjeunna nyarios, hirup sareng diajar.
Subjek basajan new Subject()– jenis pangbasajanna subjék. Dijieun tanpa parameter. Ngirimkeun nilai anu ditampi ngan saatos langganan.
PerilakuSubject new BehaviorSubject( defaultData<T> ) – dina pamadegan mah, tipe nu paling umum tina subjék. Input nyandak nilai standar. Salawasna ngahemat data tina masalah panungtungan, nu dikirimkeun nalika ngalanggan. kelas ieu ogé boga metoda nilai mangpaat, nu mulih nilai ayeuna aliran.
ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - Input pilihan tiasa nyandak salaku argumen kahiji ukuran panyangga tina nilai anu bakal disimpen dina dirina, sareng salaku kadua waktos nalika urang peryogi parobihan.
AsyncSubject new AsyncSubject() - euweuh kajadian nalika ngalanggan, sarta nilai bakal balik ngan lamun lengkep. Ngan nilai panungtungan aliran bakal balik.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Dokuméntasi jempé ngeunaan anjeunna sareng ieu pertama kalina kuring ningali anjeunna. Upami aya anu terang naon anu anjeunna laksanakeun, punten nyerat sareng kami bakal nambihanana.
Péh. Nya, kami parantos nutupan sadayana anu kuring hoyong terangkeun ka anjeun ayeuna. Kuring miharep informasi ieu mangpaat. Anjeun tiasa maca daptar rujukan sorangan dina tab inpormasi mangpaat.
informasi mantuan
sumber: www.habr.com