Assalamu alaikum. Yadda za a furta Omelnitsky Sergey. Ba da dadewa ba, na dauki nauyin rafi akan shirye-shiryen amsawa, inda na yi magana game da asynchrony a JavaScript. A yau zan so in taƙaita wannan abu.
Amma kafin mu fara babban abu, muna bukatar mu yi gabatarwa. Don haka bari mu fara da ma'anoni: menene tari da jerin gwano?
Tari tarin ne wanda abubuwan da aka dawo dasu akan “karshe, na farko” LIFO
Layi tarin ne wanda abubuwan da aka samo su bisa ga ka'ida ("na farko, na farko" FIFO
To, mu ci gaba.
JavaScript harshe ne mai zaren shirye-shirye. Wannan yana nufin cewa tana da zaren aiwatarwa guda ɗaya kawai da kuma tari ɗaya inda ake yin layi don aiwatarwa. Don haka, JavaScript zai iya yin aiki ɗaya kawai a lokaci ɗaya, yayin da sauran ayyukan za su jira lokacin da suke kan tari har sai an kira su.
Tarin kira tsarin bayanai ne wanda, a cikin sauki kalmomi, yana rubuta bayanai game da wurin da ke cikin shirin da muke. Idan muka yi tsalle cikin aiki, za mu tura shigarsa zuwa saman tarin. Lokacin da muka dawo daga aiki, zamu fitar da mafi girman kashi daga cikin tari kuma mu ƙare daga inda muka kira wannan aikin. Wannan shi ne duk abin da tari zai iya yi. Kuma yanzu tambaya mai ban sha'awa. Ta yaya asynchony yake aiki a JavasScript?
A zahiri, ban da tarin, masu bincike suna da layi na musamman don aiki tare da abin da ake kira WebAPI. Za a aiwatar da ayyuka daga wannan jerin gwano bisa tsari kawai bayan an share tari gaba ɗaya. Bayan haka sai a sanya su daga jerin gwano a kan tari don aiwatar da su. Idan akwai aƙalla kashi ɗaya a kan tarin a halin yanzu, to ba za su iya shiga cikin tarin ba. Kawai saboda wannan, ayyukan kiran ta hanyar ƙarewar lokaci yawanci ba daidai ba ne a cikin lokaci, tunda aikin ba zai iya fitowa daga jerin gwano zuwa tari ba yayin da ya cika.
Bari mu kalli misali na gaba kuma mu bi ta mataki-mataki. Bari mu kuma ga abin da ke faruwa a cikin tsarin.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Ya zuwa yanzu babu abin da ke faruwa. Na'urar wasan bidiyo mai tsafta ce, tarin kira babu kowa.
2) Sa'an nan kuma umurnin console.log ('Hi') aka ƙara zuwa kira tari.
3) Kuma ya cika
4) Sannan an cire console.log ('Hi') daga tarin kira.
5) Yanzu bari mu matsa zuwa umarnin setTimeout (aiki cb1 () {… }). Ana ƙara shi zuwa tarin kira.
6) Ana aiwatar da umarnin setTimeout (aiki cb1 () {…}). Mai binciken yana ƙirƙirar ƙidayar lokaci wanda ke cikin API ɗin Yanar Gizo. Zai yi kirgawa.
7) Umurnin setTimeout (aiki cb1 () {… }) ya kammala aikinsa kuma an cire shi daga tarin kira.
8) An ƙara umarnin console.log ('Bye') zuwa tarin kira.
9) An aiwatar da umarnin console.log ('Bye').
10) An cire umarnin console.log ('Bye') daga tarin kira.
11) Bayan aƙalla 5000ms sun wuce, mai ƙidayar lokaci ya ƙare kuma ya sake sake kiran cb1 a cikin layin dawowa.
12) Madaidaicin taron yana ɗaukar aikin cb1 daga layin dawo da kira kuma yana tura shi kan tarin kira.
13) Ana aiwatar da aikin cb1 kuma yana ƙara console.log('cb1') zuwa tarin kira.
14) An aiwatar da umarnin console.log ('cb1').
15) An cire umarnin console.log ('cb1') daga tarin kira.
16) An cire aikin cb1 daga tarin kira.
Bari mu kalli misali a cikin kuzari:
To, mun kalli yadda ake aiwatar da asynchrony a cikin JavaScript. Yanzu bari muyi magana a taƙaice game da juyin halittar asynchronous code.
Juyin halittar lambar 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);
})
})
})
})
})
});Shirye-shiryen Asynchronous kamar yadda muka san shi a cikin JavaScript ana iya yin shi tare da ayyuka kawai. Ana iya wuce su kamar kowane mai canzawa zuwa wasu ayyuka. Wannan shi ne yadda aka haifar da sake dawowa. Kuma yana da sanyi, jin daɗi da zafin rai, har sai ya rikiɗe zuwa bakin ciki, damuwa da baƙin ciki. Me yasa? Ee, yana da sauƙi:
- Yayin da rikitarwa na lambar ke girma, aikin da sauri ya juya ya zama ɓangarorin da aka ɓoye da yawa - "jahannama kira".
- Ana iya yin watsi da kurakurai a sauƙaƙe.
- Ba za ku iya mayar da maganganu tare da dawowa ba.
Da zuwan Alkawari, lamarin ya dan yi kyau.
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);
});- An bayyana sarƙoƙin alkawari, wanda ya inganta saurin karanta lambar
- Akwai wata hanya dabam ta kutse na kurakurai
- Daidaitawar kisa tare da Promise.all ƙara
- Za mu iya magance asynchrony na gida tare da async/jira
Amma alkawarin yana da gazawarsa. Alal misali, alkawari, ba tare da rawa tare da tambourine ba, ba za a iya soke shi ba, kuma mafi mahimmanci, yana aiki tare da ƙima ɗaya.
To, a nan muna gabatowa a sannu a hankali. Gaji? To, abin da ke da kyau shi ne, za ku iya zuwa ku ɗanɗana ƙwanƙwasa, tunani da kuma komawa don ƙarin karantawa. Kuma zan ci gaba.
Reactive shirye-shirye - tsarin tsarin da aka mayar da hankali kan kwararar bayanai da yada canje-canje. Bari mu dubi mene ne magudanar bayanai.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Bari mu yi tunanin cewa muna da filin shigarwa. Mun ƙirƙiri tsararru, kuma ga kowane maɓalli na taron shigar, za mu adana taron a cikin tsararrun mu. Haka kuma, ina so in lura cewa tsararrun mu ana jera su ne da lokaci, watau. fihirisar abubuwan da suka faru a baya sun fi fihirisa na farko girma. Irin wannan tsararru tsari ne mai sauƙaƙan kwararar bayanai, amma ba tukuna ya gudana ba. Domin a kira wannan tsararrun rafi lafiya, dole ne ta iya sanar da masu biyan kuɗi cewa sabbin bayanai sun shigo ciki. Ta haka ne muka zo ga ma'anar kwarara.
Ruwan bayanai
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Gudun ruwa tarin bayanai ne da aka tsara ta lokaci wanda zai iya nuna cewa bayanan sun canza. Yanzu yi tunanin yadda ya dace don rubuta lambar a cikin abin da kuke buƙatar jawo abubuwa da yawa a sassa daban-daban na lambar don aiki ɗaya. Muna kawai biyan kuɗi zuwa rafi kuma zai gaya mana lokacin da canje-canje suka faru. Kuma ɗakin karatu na RxJs zai iya yin wannan.
RxJS ɗakin karatu ne don aiki tare da asynchronous da shirye-shiryen tushen taron ta amfani da jerin abubuwan gani. Laburaren yana ba da babban nau'in Abin lura, iri-iri masu taimako (Masu lura, Jadawalin, Maudu'ai) da masu aiki don aiki tare da abubuwan da suka faru kamar yadda tarin yawa (taswira, tace, rage, kowane da makamantansu daga JavaScript Array).
Bari mu fahimci ainihin ra'ayoyin wannan ɗakin karatu.
Abun gani, Mai kallo, Mai gabatarwa
Abun gani shine nau'in tushe na farko da zamu duba. Wannan ajin ya ƙunshi babban ɓangaren aiwatar da RxJs. Yana da alaƙa da rafi mai gani, wanda za'a iya yin rajista don amfani da hanyar biyan kuɗi.
Abun gani yana aiwatar da hanyar taimako don ƙirƙirar sabuntawa, abin da ake kira observer. Ana kiran tushen ƙima ga mai duba m. Yana iya zama tsararru, mai maimaitawa, soket ɗin gidan yanar gizo, wani nau'in taron, da sauransu. Don haka za mu iya cewa abin lura shi ne madugu tsakanin Furodusa da Mai duba.
Abun lura yana sarrafa nau'ikan abubuwan lura guda uku:
- gaba - sabbin bayanai
- kuskure - kuskure idan jerin sun ƙare saboda keɓancewa. wannan taron kuma yana nuna ƙarshen jerin.
- cikakke - sigina game da ƙarshen jerin. Wannan yana nufin ba za a sami ƙarin sabbin bayanai ba
Bari mu ga demo:
A farkon za mu aiwatar da dabi'u 1, 2, 3, da kuma bayan 1 sec. mu samu 4 mu gama zaren mu.
Tunani da babbar murya
Kuma sai na gane cewa ya fi ban sha'awa in faɗi fiye da rubuta game da shi. 😀
Subscription
Lokacin da muka shiga cikin rafi, muna ƙirƙirar sabon aji biyan kuɗi, wanda ke ba mu zaɓi don cire rajista tare da hanyar Cire rajista. Hakanan za mu iya haɗa haɗin kai ta hanyar amfani da hanyar ƙara. To, yana da ma'ana cewa za mu iya raba zaren ta amfani da cire. Ƙarawa da cire hanyoyin suna karɓar biyan kuɗi daban-daban azaman shigarwa. Ina so in lura cewa lokacin da muka cire rajista, muna cire rajista daga duk rajistar yara kamar suna kiran hanyar cirewa. Ci gaba.
Nau'in rafi
HOT
CIKI
An halicci furodusa a waje da abin gani
An ƙirƙiri furodusa a cikin abin gani
Ana ƙaddamar da bayanai a lokacin da aka ƙirƙiri abin lura
Ana ba da bayanai a lokacin biyan kuɗi.
Bukatar ƙarin dabaru don cire rajista
Zaren yana ƙarewa da kansa
Yana amfani da dangantaka ɗaya-zuwa-yawa
Yana amfani da dangantaka ɗaya-da-daya
Duk biyan kuɗi suna da ƙima ɗaya
Biyan kuɗi masu zaman kansu ne
Ana iya rasa bayanai idan babu biyan kuɗi
Yana sake fitar da duk ƙimar rafi don sabon biyan kuɗi
Don ba da misali, zan yi tunanin rafi mai zafi kamar fim a cikin sinima. A wane lokaci kuka zo, daga wannan lokacin kuka fara kallo. Zan kwatanta rafi mai sanyi da kira a cikin waɗannan. goyon baya. Duk mai kira yana sauraron rikodin na'urar amsawa daga farko zuwa ƙarshe, amma kuna iya rataya tare da cire rajista.
Ina so in lura cewa akwai kuma abin da ake kira rafukan dumi (Na gamu da irin wannan ma'anar da wuya kuma a cikin al'ummomin kasashen waje kawai) - wannan rafi ne wanda ke canzawa daga rafi mai sanyi zuwa mai zafi. Tambayar ta taso - inda za a yi amfani da shi)) Zan ba da misali daga aiki.
Ina aiki tare da Angular. Yana amfani da rxjs sosai. Don samun bayanai zuwa uwar garken, Ina tsammanin rafi mai sanyi kuma ina amfani da wannan rafi a cikin samfuri ta amfani da asyncPipe. Idan na yi amfani da wannan bututu sau da yawa, to, komawa zuwa ma'anar rafi mai sanyi, kowane bututu zai buƙaci bayanai daga uwar garken, wanda baƙon abu ne. Kuma idan na canza rafi mai sanyi zuwa mai dumi, to buƙatun zai faru sau ɗaya.
Gabaɗaya, fahimtar nau'in kwarara yana da matukar wahala ga masu farawa, amma mahimmanci.
aiki
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Masu aiki suna ba mu damar yin aiki tare da rafuka. Suna taimakawa sarrafa abubuwan da ke gudana a cikin Observable. Za mu yi la'akari da wasu mashahuran ma'aurata, kuma ana iya samun ƙarin bayani game da masu aiki a hanyoyin haɗin gwiwa a cikin bayanai masu amfani.
Masu aiki-na
Bari mu fara da mai ba da taimako na. Yana haifar da Abun gani bisa ƙima mai sauƙi.
Masu aiki-tace
Mai aikin tacewa, kamar yadda sunan ke nunawa, yana tace siginar rafi. Idan ma'aikaci ya dawo da gaskiya, to ya wuce gaba.
Masu aiki - ɗauka
ɗauka - Yana ɗaukar ƙimar adadin hayaƙi, bayan haka rafi ya ƙare.
Masu aiki-debounceTime
debounceTime - yana watsar da ƙimar da aka fitar waɗanda suka faɗi cikin ƙayyadaddun tazara tsakanin bayanan fitarwa - bayan tazarar lokacin ya wuce, yana fitar da ƙimar ƙarshe.
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)
);
Masu aiki-dauka Yayin da
Yana fitar da ƙima har sai lokacin da ya dawo karya, sannan ya cire rajista daga zaren.
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 )
);
Masu aiki-haɗa na ƙarshe
Haɗaɗɗen ma'aikacin yana haɗaLatest yana ɗan kama da alkawari.all. Yana haɗa rafuka masu yawa zuwa ɗaya. Bayan kowane zaren ya yi aƙalla fitarwa ɗaya, muna samun sabbin dabi'u daga kowanne a matsayin tsararru. Bugu da ari, bayan duk wani fitarwa daga rafukan da aka haɗa, zai ba da sabbin ƙima.
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));
Masu aiki-zip
Zip - yana jiran ƙima daga kowane rafi kuma yana samar da tsararru bisa waɗannan ƙimar. Idan darajar ba ta fito daga kowane zare ba, to ba za a kafa ƙungiyar ba.
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));
Masu aiki - forkJoin
forkJoin kuma yana haɗa zaren, amma yana fitar da ƙima idan duk zaren sun cika.
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);
Masu aiki-taswira
Mai aiki da canjin taswira yana canza ƙimar fitarwa zuwa wata sabuwa.
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)
);
Masu aiki - raba, matsa
Mai amfani da famfo yana ba ka damar yin illa, wato, duk wani aiki da bai shafi jerin abubuwan ba.
Ma'aikacin raba kayan amfani zai iya juya rafi mai sanyi zuwa mai zafi.
Masu aiki sun gama. Mu ci gaba zuwa Magana.
Tunani da babbar murya
Sai na je na sha shayi. Na gaji da wadannan misalan 😀
Iyalin batun
Iyalin batun shine babban misali na zaren zaren. Waɗannan azuzuwan akwai wani nau'in matasan da ke da alaƙa da mai kallo a lokaci guda. Tunda batun rafi ne mai zafi, dole ne a cire rajista daga. Idan muka yi magana game da manyan hanyoyin, to waɗannan su ne:
- gaba - mika sabbin bayanai zuwa rafi
- kuskure - kuskure da ƙarewar zaren
- cikakke - ƙarshen zaren
- subscribing - yi subscribing zuwa wani rafi
- cire rajista - cire rajista daga rafi
- asobservable - canzawa zuwa mai kallo
- Alkawari - yana canzawa zuwa alkawari
Ware nau'ikan batutuwa guda 4 5.
Tunani da babbar murya
Na ce 4 akan rafi, amma sai ya zama sun kara daya. Kamar yadda ake cewa, ku rayu ku koyi.
Magana Mai Sauƙi new Subject()- mafi sauki nau'in batutuwa. An ƙirƙira ba tare da sigogi ba. Ya wuce ƙimar da ta zo kawai bayan biyan kuɗi.
Batun Hali new BehaviorSubject( defaultData<T> ) - a ganina mafi yawan nau'in batutuwa-s. Shigarwar tana ɗaukar ƙimar tsoho. Koyaushe yana adana bayanan fitowar ta ƙarshe, waɗanda ake watsawa yayin biyan kuɗi. Wannan ajin kuma yana da hanyar ƙima mai amfani wanda ke dawo da ƙimar rafi na yanzu.
Sake kunna batun new ReplaySubject(bufferSize?: number, windowTime?: number) - Optionally, yana iya ɗauka azaman hujja ta farko girman ma'aunin ƙimar da zai adana a cikin kanta, kuma a karo na biyu lokacin da muke buƙatar canje-canje.
asynced batun new AsyncSubject() - babu abin da zai faru lokacin biyan kuɗi, kuma ƙimar za a dawo da ita kawai idan an gama. Ƙimar ƙarshe na rafin ne kawai za a dawo da shi.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Takaddun sun yi shiru game da shi kuma ni kaina na gani a karon farko. Wane ne ya san abin da yake yi, rubuta, za mu ƙara.
Phew. To, mun yi la'akari da duk abin da nake so in faɗa a yau. Da fatan wannan bayanin ya taimaka. Kuna iya karanta jerin wallafe-wallafen da kanku a cikin Shafukan Bayani mai Amfani.
m bayanai
source: www.habr.com