Kia ora katoa. Kei te pa atu a Sergey Omelnitsky. Kaore i roa i mua ka whakahaerehia e ahau he awa mo te hotaka reactive, i korero ahau mo te tukutahinga i roto i te JavaScript. I tenei ra ka hiahia ahau ki te tuhi korero mo tenei rauemi.
Engari i mua i te tiimata i te kaupapa matua, me tuhi he korero whakataki. Na me timata tatou ki nga whakamaramatanga: he aha te puranga me te rarangi?
Tāpae he kohinga ka whiwhia nga huānga i runga i te tikanga LIFO-whakauru-ma-mua, puta-tuatahi
Koinei he kohinga ka whiwhia nga huānga i runga i te tuatahi ki roto, tuatahi ki waho FIFO
Kaati, me haere tonu.
Ko te JavaScript he reo hotaka miro kotahi. Ko te tikanga he kotahi noa te miro o te mahi me te paparanga kei runga i nga mahi e tutira ana mo te mahi. Na reira, ka taea e JavaScript anake te mahi i tetahi mahi i te wa kotahi, ko etahi atu mahi ka tatari i to raatau wa i runga i te puranga tae noa ki te karanga.
Karangahia te puranga he hanganga raraunga, ka tuhi noa, ka tuhi korero mo te waahi kei roto i te kaupapa kei reira matou. Mena ka uru tatou ki tetahi mahi, ka panaia tona urunga ki runga ake o te puranga. Ka hoki mai tatou i tetahi mahi, ka pekehia e tatou te huānga o runga rawa mai i te puranga ka mutu ki muri ki te wahi i kiia ai te mahi. Ko tenei anake ka taea e te puranga. Na inaianei he patai tino pai. Me pehea te mahi a tukutahi i roto i te JavasScript?
Inaa, i tua atu i te puranga, he rarangi motuhake nga kaitirotiro mo te mahi me te WebAPI e kiia nei. Ko nga mahi i roto i tenei rarangi ka mahia i roto i te raupapa i muri i te whakakorenga o te puranga. Whai muri noa i tenei ka panaia mai i te rarangi ki runga i te puranga mo te mahi. Mēnā kotahi te iti rawa o te huānga kei te tāpae i tēnei wā, kāre e taea te tāpiri ki te tāpae. Na te mea ko nga mahi waea ma te waahi kaore i te tika i te waa, na te mea kaore e taea e te mahi te puta mai i te rarangi ki te puranga i te wa e ki ana.
Kia titiro tatou ki te tauira e whai ake nei ka timata me tana mahi taahiraa-i-taahiraa. Kia kite ano tatou he aha te mea ka tupu i roto i te punaha.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Kare ano he mea e tupu ana. He maamaa te papatohu tirotiro, kei te putua te puranga waea.
2) Kātahi ka tāpirihia te whakahau console.log('Hi') ki te tāpae waea.
3) A kua tutuki
4) Na ka tangohia te console.log('Hi') mai i te puranga waea.
5) Inaianei neke ki te whakahau setTimeout(mahi cb1() {… }). Ka taapirihia ki te puranga waea.
6) Ka mahia te whakahau setTimeout(mahi cb1() {… }). Ka hangaia e te kaitirotiro he taima he waahanga o te API Tukutuku. Ka mahia he tatau.
7) Kua oti ana mahi te whakahau setTimeout(mahi cb1() {... }) ka tangohia mai i te puranga waea.
8) Ka taapirihia te papatohu whakahau.log('Bye') ki te puranga waea.
9) Ka mahia te whakahau console.log('Bye').
10) Ka tangohia te papatohu whakahau.log('Bye') mai i te puranga waea.
11) I muri i te 5000 ms kua pahemo, ka mutu te matama ka tuu i te cb1 ki te rarangi waea hoki.
12) Ka tangohia e te takahanga takahanga cb1 te mahi mai i te rarangi waea hoki ka tuu ki runga i te puranga waea.
13) Ka mahia te mahi cb1 me te taapiri console.log('cb1') ki te puranga waea.
14) Ka mahia te whakahau console.log('cb1').
15) Ka tangohia te papatohu whakahau.log('cb1') mai i te puranga waea.
16) Ka tangohia te mahi cb1 mai i te puranga waea.
Kia titiro tatou ki tetahi tauira i roto i te hihiri:
Ana, i titiro matou ki te whakatinanatanga o te asynchrony ki JavaScript. Inaianei me korero poto mo te whanaketanga o te waehere tukutahi.
Te whanaketanga o te waehere tukutahi.
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);
})
})
})
})
})
});Ka taea e nga mahi anake te whakatinana i nga kaupapa rerekee rite ki ta tatou e mohio ana i roto i te JavaScript. Ka taea te tuku pera me etahi atu taurangi ki etahi atu mahi. Koinei te ahua i whanau mai ai nga waea hoki. A he pai, he ngahau me te takaro, tae noa ki te huri ki te pouri, te pouri me te pouri. He aha? He ngawari:
- Ka piki ake te uaua o te waehere, ka huri tere te kaupapa ki roto i nga poraka pouri, kua noho kohanga tonu - "callback reinga".
- Ko te whakahaere hapa he ngawari ki te ngaro.
- Kaore e taea e koe te whakahoki korero me te whakahoki.
I te taenga mai o te kupu whakaari, kua pai ake te ahua.
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);
});- I puta mai nga mekameka oati, i pai ake ai te panui waehere
- Kua puta he tikanga motuhake mo te hopu hapa
- Kua taapirihia te kaha o te mahi whakarara ma te whakamahi i te Promise.all
- Ka taea e tatou te whakaoti i te tukutahinga kohanga ma te whakamahi i te tukutahi/tatari
Te vai ra râ te mau taotiaraa i te mau parau fafau. Hei tauira, e kore e taea te whakakore i te oati ki te kore e kanikani me te timipera, a ko te mea nui ko te mahi me te uara kotahi.
Ana, kua pai ta matou whakatata atu ki nga kaupapa hoheko. ngenge? Kaati, ko te waimarie, ka taea e koe te haere ki te mahi tii, whakaarohia, ka hoki mai ano ki te panui atu. A ka haere tonu ahau.
Hōtaka tauhohenga he kaupapa kaupapa e arotahi ana ki nga rerenga raraunga me te whakatö huri. Kia ata tirohia he aha te rerenga raraunga.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Whakaarohia he waahi whakauru ta tatou. Kei te hanga tatou i te huinga, a mo ia keyup o te takahanga tāuru ka rokiroki e matou te takahanga i roto i to tatou huānga. I te wa ano, ka hiahia ahau ki te mohio kei te whakariteritehia to maatau huinga i te wa, i.e. he nui ake te taurangi o nga huihuinga o muri mai i te taurangi o nga mea o mua. Ko taua huinga he tauira ngawari o te rerenga raraunga, engari kaore ano kia rere. Kia tika ai te karangatanga o tenei huinga he awa, me kaha ki te whakamohio ki nga kaiohauru kua tae mai nga raraunga hou ki roto. Koia ka tae ki te whakamaramatanga o te rere.
Te awa raraunga
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Rere he huānga raraunga kua kōmakahia mā te wā ka tohu kua huri te raraunga. Whakaarohia te watea ki te tuhi i te waehere me waea tetahi mahi ki nga huihuinga maha i nga waahanga rereke o te waehere. Ka ohauru noa matou ki te awa ka whakamohio mai ina puta nga huringa. A ka taea e te whare pukapuka RxJs tenei.
RxJS he whare pukapuka mo te mahi tahi me nga kaupapa tukutahi me nga kaupapa-a-takahanga ma te whakamahi i nga raupapa ka kitea. Ka whakaratohia e te whare pukapuka he momo taketake Ka kitea, he maha nga momo awhina (Kaitirotiro, Kaiwhakarite, Kaupapa) me nga kaiwhakahaere mo te mahi me nga huihuinga pera me nga kohinga (mahere, tātari, whakaiti, ia me nga mea rite mai i JavaScript Array).
Kia mohio tatou ki nga kaupapa matua o tenei whare pukapuka.
Observable, Observer, Kaihanga
Ko te momo taketake tuatahi ka tirohia e tatou. Kei roto i tenei akomanga te waahanga matua o te whakatinanatanga RxJs. E hono ana ki tetahi awa ka kitea, ka taea te ohauru ki te whakamahi i te tikanga ohauru.
Ka whakatinanahia e Observable tetahi tikanga kaiawhina mo te hanga whakahōutanga, te mea e kiia nei Observer. Ko te puna o nga uara mo te Kaitirotiro ka kiia Kaihautū. Ka taea pea tenei he huinga, he kaitoro, he turanga paetukutuku, he momo huihuinga, aha atu. No reira ka taea e tatou te kii ko te kitea he kaikawe i waenga i te Kaihanga me te Kaititiro.
Ka whakahaerehia e Observable e toru nga momo kaupapa a Observer:
- muri - raraunga hou
- hapa – he hapa mena ka mutu te raupapa na te mea he rereke. Ko tenei huihuinga e tohu ana i te otinga o te raupapa.
- oti — tohu mo te otinga o te raupapa. Ko te tikanga ka kore he raraunga hou.
Kia kite tatou i te demo:
I te timatanga ka tukatukahia e matou nga uara 1, 2, 3, a muri i te 1 hēkona. ka whiwhi tatou 4 ka mutu to tatou awa.
Te whakaaro nui
Na ka mohio ahau he pai ake te korero i te tuhi korero. 😀
ohaurunga
Ina ohauru tatou ki tetahi roma ka hangaia he akomanga hou tiwhiketee homai ana ki a tatou te kaha ki te whakakore i te ohauru ma te whakamahi i te tikanga wewete. Ka taea hoki te whakarōpū ohaurunga ma te whakamahi i te tikanga tāpiri. Ana, he arorau ka taea e tatou te wetewete i nga miro ma te whakamahi tango. Ko nga tikanga taapiri me te tango ka whakaae ki tetahi atu ohaurunga hei whakaurunga. E hiahia ana ahau ki te mahara ka wete tatou i te ohauru, ka wetewete tatou i nga ohaurunga tamariki katoa me te mea i kiia e ratou te tikanga whakakore. Haere i mua.
Nga momo awa
HOT
HANGA
Ka hangaia te kaihanga ki waho ka kitea
Ka hangaia te Kaihanga i roto ka kitea
Ka whakawhitihia nga raraunga i te wa i hangaia ai te tirohanga
Ka tukuna nga raraunga i te wa ohaurunga
Me arorau taapiri mo te whakakore ohaurunga
Ka mutu te miro ki a ia ano
Ka whakamahi hononga kotahi ki te maha
Ka whakamahi hononga kotahi ki tetahi
He rite tonu te tikanga o nga ohaurunga katoa
He motuhake nga ohaurunga
Ka ngaro nga raraunga mena karekau he ohaurunga
Ka tukuna ano nga uara roma katoa mo te ohaurunga hou
Hei whakataurite, ka whakaaro ahau he awa wera hei kiriata i roto i te whare tapere. I te wa i tae mai koe, mai i tera wa i timata koe ki te matakitaki. Ka whakataurite ahau i te rere makariri ki te waea hangarau. tautoko. Ka whakarongo tetahi kaiwaea ki te rekoata reo mai i te tiimatanga ki te mutunga, engari ka taea e koe te whakairi ki runga ma te whakakore i te ohauru.
E hiahia ana ahau ki te mohio kei reira ano nga mea e kiia ana ko nga rerenga mahana (kua kite ahau i tenei whakamaarama he tino uaua, i nga hapori ke anake) - he rere tenei ka huri mai i te rere makariri ki te wera. Ka puta te patai - kei hea te whakamahi)) Ka hoatu e ahau he tauira mai i nga mahi.
Kei te mahi ahau me Angular. He kaha tana whakamahi i nga rxjs. Ki te whiwhi raraunga ki te tūmau, ka tumanako ahau he miro makariri me te whakamahi i tenei miro i roto i te tauira ma te whakamahi i te asyncPipe. Mena he maha nga wa ka whakamahia e au tenei putorino, ka hoki mai ki te whakamaramatanga o te awa makariri, ka tono ia paipa i nga raraunga mai i te tūmau, he mea rereke te korero. A, ki te huri ahau i te awa matao ki te wai mahana, katahi ka puta te tono.
I te nuinga o te waa, he uaua te maarama ki te momo rerenga mo te hunga timata, engari he mea nui.
ngā Tohutūmahi
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Ka whakawhiwhia e nga kaiwhakahaere ki a matou te kaha ki te whakawhānui ake i to maatau kaha ki te mahi me nga awa. Ka awhina ratou ki te whakahaere i nga kaupapa ka puta i te Tirohanga. Ka tirohia e matou etahi o nga mea rongonui e rua, a ka kitea etahi atu korero mo nga kaiwhakahaere ma te whakamahi i nga hononga i roto i nga korero whai hua.
Kaiwhakahaere - o
Me timata ki te kaiwhakahaere awhina o. Ka hangaia he Observable i runga i te uara ngawari.
Kaiwhakahaere - tātari
Ko te kaiwhakahaere tātari, e ai ki te ingoa, ka tātari i te tohu awa. Mena ka hoki mai te kaiwhakahaere pono, ka peke atu.
Kaiwhakahaere - tango
tango - Ka tango i te uara o te maha o nga emitters, ka mutu te miro.
Kaiwhakahaere - debounceTime
debounceTime - ka whakakore i nga uara kua tukuna ka taka ki roto i te waa kua tohua i waenga i nga putanga - i muri i te paahitanga o te waa, ka tukuna te uara whakamutunga.
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)
);
Kaiwhakahaere - takeWhile
Ka tuku uara tae noa ki te takeWhile ka hoki teka, ka mutu ka wetewete i te miro.
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 )
);
Kaiwhakahaere - combineLatest
Ko te kaiwhakahaere combineLatest he ahua rite ki te promise.all. Ka whakakotahi i nga miro maha ki te kotahi. I muri i ia miro kia kotahi te whakaputanga, ka whiwhi tatou i nga uara hou mai i ia miro i te ahua o te huinga. I tua atu, i muri i nga tukunga mai i nga awa hanumi, ka puta he uara hou.
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));
Kaiwhakahaere - zip
Zip - Ka tatari mo tetahi uara mai i ia miro ka hanga he huinga i runga i enei uara. Mena karekau te uara i puta mai i tetahi miro, karekau te roopu e hanga.
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));
Kaiwhakahaere - forkJoin
Ka hono hoki te forkJoin ki nga miro, engari ka puta he uara ka oti katoa nga miro.
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);
Kaimahi - mapi
Ka hurihia e te kaiwhakahaere huringa mapi te uara emitter ki tetahi mea hou.
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)
);
Kaimahi – tiri, paopao
Ko te kaiwhakahaere tap ka taea e koe te mahi i nga paanga taha, ara, nga mahi kaore e pa ki te raupapa.
Ka taea e te kaiwhakahaere whaipainga hea te huri i te awa makariri ki te wera.
Kua oti taatau ki nga kaiwhakahaere. Me neke atu ki te Kaupapa.
Te whakaaro nui
Na ka haere ahau ki te inu ti. Kua hoha ahau ki enei tauira 😀
Whanau kaupapa
Ko te whanau kaupapa he tauira nui o nga rerenga wera. Ko enei karaehe he momo ranu e mahi ana i te wa kotahi hei tirohanga me te kaitirotiro. I te mea he miro wera te kaupapa, me whakakore te ohauru mai. Mena ka korero tatou mo nga tikanga matua, ko enei:
- i muri mai - te whakawhiti i nga raraunga hou ki te awa
- hapa - hapa me te whakamutu miro
- oti – te whakaotinga o te miro
- ohauru – ohauru ki tetahi awa
- wetewete i te ohaurunga – wete ohauru mai i te awa
- asObservable – huri hei kaitirotiro
- toPromise – ka huri hei oati
E 4 5 nga momo kaupapa.
Te whakaaro nui
E 4 nga tangata e korero ana i runga i te awa, engari katahi ano ka tapirihia. E ai ki ta ratou, ora me te ako.
Kaupapa Maamaa new Subject()– te momo kaupapa ngawari. I hangaia kaore he tawhā. Ka tukuna nga uara ka riro i muri i te ohaurunga.
WhanongaKaupapa new BehaviorSubject( defaultData<T> ) – ki taku nei whakaaro, ko te momo kaupapa tino noa. Ka tangohia e te whakauru te uara taunoa. Tiaki tonu nga raraunga o te putanga whakamutunga, ka tukuna ina ohauru. He tikanga uara whai hua ano tenei karaehe, e whakahoki ana i te uara o naianei o te awa.
ReplayKaupapa new ReplaySubject(bufferSize?: number, windowTime?: number) — Ka taea e te whakaurunga te tango hei tohenga tuatahi te rahi o te kaitarai o nga uara ka penapena i a ia ano, me te tuarua ko te waa e hiahia ana tatou ki nga huringa.
Kaupapa Async new AsyncSubject() — karekau he mea ka puta ina ohauru, ka whakahokia te uara ka oti anae. Ko te uara whakamutunga anake o te awa ka whakahokia.
Kaupapa Tukutuku new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — Kei te wahangu nga tuhinga mo ia ka kite ahau i a ia mo te wa tuatahi. Mena ka mohio tetahi ki tana mahi, tuhia mai ka taapirihia e matou.
Phew. Ana, kua hipokina e matou nga mea katoa e hiahia ana ahau ki te korero ki a koe i tenei ra. Ko te tumanako i whai hua enei korero. Ka taea e koe te panui i te rarangi tohutoro i roto i te ripa korero whai hua.
mōhiohio āwhina
Source: will.com