Mapulogalamu asynchronous mu JavaScript (Callback, Promise, RxJs)

Moni nonse. SERGEY Omelnitsky akulankhula. Osati kale kwambiri ndidakhala ndi mtsinje pamapulogalamu okhazikika, pomwe ndidalankhula za asynchrony mu JavaScript. Lero ndikufuna kulemba zolemba pa nkhaniyi.

Koma tisanayambe nkhani yaikulu, tiyenera kulemba mawu oyamba. Ndiye tiyeni tiyambe ndi matanthauzo: kodi stack ndi mzere?

Okwana ndi zosonkhanitsira zomwe zinthu zake zimapezedwa komaliza, koyambirira kwa LIFO

Mzere ndi zosonkhanitsira zomwe zinthu zake zimapezedwa poyambira, zoyambira FIFO

Chabwino, tiyeni tipitilize.

JavaScript ndi chinenero cha pulogalamu ya ulusi umodzi. Izi zikutanthauza kuti pali ulusi umodzi wokha wogwiritsiridwa ntchito ndi mulu umodzi womwe ntchito zaimilira kuti zichitike. Chifukwa chake, JavaScript imatha kuchita opareshoni imodzi panthawi imodzi, pomwe ma opareshoni ena amadikirira nthawi yawo pa stack mpaka atayitanidwa.

kuitana stack ndi dongosolo la data lomwe, mwachidule, limalemba zambiri za malo mu pulogalamu yomwe tili. Ngati tidutsa mu ntchito, timakankhira kulowa kwake pamwamba pa stack. Tikabwerera kuchokera ku ntchito, timayika chinthu chapamwamba kwambiri kuchokera pamndandanda ndikubwerera komwe tidatcha ntchitoyo. Izi ndi zonse zomwe stack ingachite. Ndipo tsopano funso lochititsa chidwi kwambiri. Nanga asynchrony imagwira ntchito bwanji mu JavasScript?

M'malo mwake, kuwonjezera pa stack, asakatuli ali ndi mzere wapadera wogwira ntchito ndi zomwe zimatchedwa WebAPI. Zochita zomwe zili pamzerewu zichitika motsatira pokhapokha zitachotsedwa. Zitatha izi m'pamene amakankhidwa kuchokera pamzere kupita pamtengo kuti aphedwe. Ngati pali chinthu chimodzi pa stack pakadali pano, ndiye kuti sichingawonjezedwe pamndandandawo. Ndi chifukwa cha ichi kuti kuyimba ntchito pomaliza nthawi nthawi zambiri sikumakhala kolondola mu nthawi yake, chifukwa ntchitoyo siyingachoke pamzere kupita ku stack ili yodzaza.

Tiyeni tiwone chitsanzo chotsatirachi ndikuyamba ndi kukhazikitsa kwake pang'onopang'ono. Tiyeni tiwone zomwe zimachitika mudongosolo.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) Palibe chomwe chikuchitika. Msakatuli wa msakatuli ndi womveka, chojambulira choyimba chilibe kanthu.

2) Kenako lamulo la console.log('Hi') limawonjezedwa ku stack call.

3) Ndipo kwakwaniritsidwa

4) Kenako console.log('Hi') imachotsedwa pamndandanda wamayimbidwe.

5) Tsopano pitilirani ku lamulo setTimeout(function cb1() {... }). Imawonjezedwa ku stack call.

6) Lamulo la setTimeout(function cb1() {... }) limachitidwa. Msakatuli amapanga chowerengera chomwe chili gawo la Web API. Ichita kuwerengera.

7) Lamulo la setTimeout(function cb1() {... }) lamaliza ntchito yake ndikuchotsedwa pa stack call.

8) Lamulo la console.log('Bye') liwonjezedwa ku stack call.

9) Lamulo la console.log('Bye') limachitidwa.

10) Lamulo la console.log('Bye') limachotsedwa pa stack call.

11) Pakadutsa osachepera 5000 ms, chowerengera chimatha ndikuyika callback cb1 pamzere wobwereza.

12) Chidutswa cha chochitikacho chimatenga ntchito cb1 kuchokera pamzere wobwereza ndikuyiyika pa stack call.

13) Ntchito cb1 imachitidwa ndikuwonjezera console.log('cb1') ku stack call.

14) Lamulo la console.log('cb1') limachitidwa.

15) Lamulo la console.log('cb1') limachotsedwa pa stack call.

16) Ntchito cb1 imachotsedwa pagulu loyimba.

Tiyeni tiwone chitsanzo mu dynamics:

Chabwino, tidayang'ana momwe asynchrony imakhazikitsidwa mu JavaScript. Tsopano tiyeni tikambirane mwachidule za kusinthika kwa code asynchronous.

Kusintha kwa asynchronous code.

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);
                    })
                })
            })
        })
    })
});

Mapulogalamu a Asynchronous monga tikudziwira mu JavaScript amatha kukhazikitsidwa ndi ntchito. Zitha kuperekedwa ngati kusintha kwina kulikonse kuzinthu zina. Umu ndi momwe ma callback amabadwira. Ndipo zimakhala zoziziritsa kukhosi, zoseketsa komanso zoseweretsa, mpaka zitasintha kukhala zachisoni, zachisoni komanso zachisoni. Chifukwa chiyani? Ndi zophweka:

• Pamene zovuta za code zikuchulukirachulukira, polojekitiyo imasanduka midadada yobisika, yokhazikika mobwerezabwereza - "hellback".
• Kuwongolera zolakwika kungakhale kosavuta kuphonya.
• Simungathe kubwezera mawu ndi kubwezera.

Kubwera kwa Promise zinthu zidayamba kuyenda bwino.

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);
});

• Maunyolo alonjezano adawonekera, zomwe zidapangitsa kuti ma code aziwerengeka
• Njira ina yopezera zolakwika yawonekera
• Anawonjezera kuthekera kwa kuphedwa kofanana pogwiritsa ntchito Promise.all
• Titha kuthana ndi ma asynchrony okhala ndi zisa pogwiritsa ntchito async/ait

Koma malonjezo ali ndi malire ake. Mwachitsanzo, lonjezo silingatheke popanda kuvina ndi maseche, ndipo chofunika kwambiri, limagwira ntchito ndi mtengo umodzi.

Chabwino, tayandikira bwino mapulogalamu okhazikika. Wotopa? Chabwino, mwamwayi, inu mukhoza kupita kukapanga tiyi, kuganizira za izo ndi kubwerera kuwerenga zambiri. Ndipo ndipitiriza.

Reactive Programming ndi paradigm yamapulogalamu yomwe imayang'ana kwambiri kayendedwe ka data ndikusintha kufalitsa. Tiyeni tiwone mwatsatanetsatane zomwe mtsinje wa data uli.

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

Tiyerekeze kuti tili ndi gawo lolowera. Tikupanga mndandanda ndipo pakusintha kulikonse kwa chochitikacho tidzasunga chochitikacho pamndandanda wathu. Panthawi imodzimodziyo, ndikufuna kuzindikira kuti gulu lathu limasankhidwa ndi nthawi, i.e. mlozera wa zochitika zapambuyo pake ndi wokulirapo kuposa mlozera wa zakale. Mndandanda woterewu ndi chitsanzo chosavuta cha kayendedwe ka deta, koma sichinayambe kuyenda. Kuti gululi likhale lodziwika bwino kuti mtsinje, liyenera kudziwitsa olembetsa kuti deta yatsopano yafika mmenemo. Motero timafika ku tanthauzo la kuyenda.

Mtsinje wa data

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

Mumayenda ndi gulu la data losanjidwa ndi nthawi yomwe ingasonyeze kuti deta yasintha. Tsopano ganizirani momwe zimakhalira zosavuta kulemba nambala yomwe chinthu chimodzi chimafuna kuyitanira zochitika zingapo m'magawo osiyanasiyana a code. Timangolembetsa kumtsinjewu ndipo udzatidziwitsa zikasintha. Ndipo laibulale ya RxJs imatha kuchita izi.

RxJS ndi laibulale yogwirira ntchito ndi mapulogalamu osasinthika komanso okhudzana ndi zochitika pogwiritsa ntchito zotsatizana zowoneka. Laibulale imapereka mtundu woyambira Zowoneka, mitundu yambiri yothandizira (Wowonera, Okonza, Nkhani) ndi ogwira ntchito kuti agwire ntchito ndi zochitika monga zosonkhanitsa (mapu, fyuluta, kuchepetsa, chirichonse ndi ofanana ndi JavaScript Array).

Tiyeni timvetsetse mfundo zofunika za laibulale imeneyi.

Zowoneka, Wowonera, Wopanga

Chowoneka ndi mtundu woyamba womwe tiwona. Kalasi iyi ili ndi gawo lalikulu la kukhazikitsa kwa RxJs. Zimalumikizidwa ndi mtsinje wowoneka, womwe ungalembetsedwe pogwiritsa ntchito njira yolembetsa.

Observable imagwiritsa ntchito njira yothandizira popanga zosintha, zomwe zimatchedwa Wopenya. Magwero amtengo wapatali kwa Observer amatchedwa Producer. Izi zitha kukhala mndandanda, iterator, socket yapaintaneti, zochitika zamtundu wina, ndi zina. Chifukwa chake titha kunena kuti chowoneka ndi chowongolera pakati pa Wopanga ndi Observer.

Zowoneka zimagwira mitundu itatu ya zochitika za Observer:

• yotsatira - deta yatsopano
• cholakwika - cholakwika ngati mndandanda udatha chifukwa chosiyana. chochitika ichi chikutanthauzanso kutha kwa ndondomekoyi.
• wathunthu - chizindikiro cha kutha kwa mndandanda. Izi zikutanthauza kuti sipadzakhalanso deta yatsopano.

Tiyeni tiwone demo:

Pachiyambi tidzakonza mfundo 1, 2, 3, ndipo pambuyo 1 sekondi. tipeza 4 ndikumaliza mtsinje wathu.

Kuganiza mokweza

Ndiyeno ndinazindikira kuti kufotokoza izo kunali kosangalatsa kuposa kulemba za izo. 😀

muzimvetsera

Tikamalembetsa kumtsinje timapanga kalasi yatsopano kulembetsazomwe zimatipatsa kuthekera kosiya kulembetsa pogwiritsa ntchito njira tulukani. Tikhozanso kupanga magulu olembetsa pogwiritsa ntchito njirayo kuwonjezera. Chabwino, ndi zomveka kuti tikhoza kugawa ulusi pogwiritsa ntchito kuchotsa. Njira zowonjezera ndi kuchotsa zimavomereza kulembetsa kwina ngati kulowetsa. Ndikufuna kudziwa kuti tikasiya kulembetsa, timadzipatula ku zolembetsa zonse za ana ngati kuti aitana njira yochotsera. Chitani zomwezo.

Mitundu ya mitsinje

Hot
CUL

Wopanga amapangidwa ndi mawonekedwe akunja
Wopanga amapangidwa mkati mwa mawonekedwe

Deta imasamutsidwa panthawi yomwe zowoneka zimapangidwira
Deta imaperekedwa panthawi yolembetsa

Pakufunika malingaliro owonjezera kuti musalembetse
Ulusiwo umatha paokha

Amagwiritsa ntchito mgwirizano umodzi ndi ambiri
Amagwiritsa ntchito ubale wina ndi mnzake

Zolembetsa zonse zili ndi tanthauzo lofanana
Zolembetsa ndizodziyimira pawokha

Deta ikhoza kutayika ngati mulibe zolembetsa
Imatulutsanso ma streams onse olembetsa mwatsopano

Kuti ndifotokoze fanizo, ndingaganize za mtsinje wotentha ngati kanema m'bwalo lamasewera. Pa nthawi yomwe mudafika, kuyambira nthawi imeneyo mudayamba kuyang'ana. Ndingafananize kuyenda kozizira ndi kuyimba kwaukadaulo. thandizo. Woyimba aliyense amamvetsera kujambula kwa voicemail kuyambira koyambira mpaka kumapeto, koma mutha kuyimitsa pochotsa.

Ndikufuna kuzindikira kuti palinso zomwe zimatchedwa kutentha (Ndakumanapo ndi tanthawuzoli kawirikawiri komanso m'madera akunja) - uku ndiko kutuluka komwe kumasintha kuchoka kuzizira kupita ku kutentha. Funso limadzuka - komwe mungagwiritse ntchito)) Ndipereka chitsanzo kuchokera pazochita.

Ndikugwira ntchito ndi Angular. Amagwiritsa ntchito rxjs mwachangu. Kuti ndilandire deta ku seva, ndikuyembekeza ulusi wozizira ndikugwiritsa ntchito ulusi uwu mu template pogwiritsa ntchito asyncPipe. Ngati ndigwiritsa ntchito chitoliro ichi kangapo, ndiye, ndikubwerera ku tanthauzo la mtsinje wozizira, chitoliro chilichonse chidzapempha deta kuchokera ku seva, zomwe ziri zachilendo kunena pang'ono. Ndipo ngati nditembenuza mtsinje wozizira kukhala wofunda, ndiye kuti pempho lidzachitika kamodzi.

Nthawi zambiri, kumvetsetsa mtundu wamayendedwe kumakhala kovuta kwa oyamba kumene, koma ndikofunikira.

Ogwira ntchito

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

Othandizira amatipatsa luso lokulitsa luso lathu logwira ntchito ndi mitsinje. Zimathandizira kuwongolera zochitika zomwe zikuchitika mu Observable. Tiwona angapo otchuka kwambiri, ndipo zambiri za ogwiritsa ntchito zitha kupezeka pogwiritsa ntchito maulalo azidziwitso zothandiza.

Othandizira - a

Tiyeni tiyambe ndi wothandizira wothandizira wa. Zimapanga Zowoneka kutengera mtengo wosavuta.

Othandizira - fyuluta

Wogwiritsa ntchito fyuluta, monga momwe dzinalo likusonyezera, amasefa chizindikiro cha mtsinje. Ngati wogwiritsa ntchitoyo abwerera zoona, amadumphanso.

Othandizira - tengani

kutenga - Amatenga mtengo wa chiwerengero cha emitters, kenako ulusi umatha.

Othandizira - debounceTime

debounceTime - imataya zikhalidwe zomwe zimagwera mkati mwa nthawi yodziwika pakati pazotulutsa - nthawi ikadutsa, imatulutsa mtengo womaliza.

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)
);  

Othandizira - takeWhile

Imatulutsa ma values ​​​​mpaka takeWhile itabweza zabodza, pambuyo pake imasiya kulembetsa ulusi.

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 )
);  

Othandizira - kuphatikizaLatest

The combineLatest operator ndi yofanana ndi lonjezo.all. Zimaphatikiza ulusi wambiri kukhala umodzi. Ulusi uliwonse utatha kutulutsa kamodzi, timapeza zaposachedwa kwambiri kuchokera pamtundu uliwonse. Komanso, pambuyo pa kutulutsa kulikonse kwa mitsinje yophatikizidwa, ipereka zikhalidwe zatsopano.

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));

Othandizira - zip

Zip - Imadikirira mtengo kuchokera ku ulusi uliwonse ndikupanga mndandanda kutengera izi. Ngati mtengowo suchokera ku ulusi uliwonse, ndiye kuti gululo silidzapangidwa.

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));

Othandizira - forkJoin

forkJoin imaphatikizanso ulusi, koma imangotulutsa mtengo ulusi wonse ukamalizidwa.

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);

Othandizira - mapu

Wosintha mapu amasintha mtengo wa emitter kukhala watsopano.

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)
);

Othandizira - gawani, dinani

Wogwiritsa ntchito wapampopi amakulolani kuti muzichita zoyipa, ndiye kuti, zochita zilizonse zomwe sizikhudza kutsata.

Wogwiritsa ntchito magawo amatha kusintha mtsinje wozizira kukhala wotentha.

Tathana ndi ogwira ntchito. Tiyeni tipitirire ku Nkhani.

Kuganiza mokweza

Kenako ndinapita kukamwa tiyi. Ndatopa ndi zitsanzo izi 😀

Banja la phunziro

Banja lachidziwitso ndi chitsanzo chabwino cha kutentha kotentha. Makalasi awa ndi mtundu wosakanizidwa womwe umachita nthawi imodzi ngati zowoneka komanso zowonera. Popeza mutu ndi ulusi wotentha, ndikofunikira kusiya kulembetsa. Ngati tilankhula za njira zazikuluzikulu, ndiye izi:

• chotsatira - kusamutsa deta yatsopano kumtsinje
• cholakwika - cholakwika ndi kutha kwa ulusi
• kumaliza - kumaliza ulusi
• lembetsani - lembetsani ku mtsinje
• osalembetsa - osalembetsa kumtsinje
• mongaObservable - sinthani kukhala wowonera
• toPromise - kusandulika kukhala lonjezo

Pali mitundu 4 5 ya maphunziro.

Kuganiza mokweza

Panali anthu 4 omwe amalankhula pamtsinje, koma zidapezeka kuti adawonjezera wina. Monga akunena, khalani ndi kuphunzira.

Nkhani Yosavuta new Subject()- mtundu wosavuta wa maphunziro. Adapangidwa popanda magawo. Kutumiza mitengo yomwe idalandiridwa pokhapokha mutalembetsa.

BehaviourSubject new BehaviorSubject( defaultData<T> ) - mwa lingaliro langa, mtundu wofala kwambiri wa phunziro. Kulowetsa kumatenga mtengo wokhazikika. Nthawi zonse zimasunga deta ya nkhani yomaliza, yomwe imafalitsidwa polembetsa. Kalasiyi ilinso ndi njira yothandiza, yomwe imabweretsanso mtengo wamakono wamtsinje.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - Kulowetsako kumatha kutenga ngati mkangano woyamba kukula kwa buffer yamtengo wapatali yomwe ingasungire yokha, komanso yachiwiri nthawi yomwe tikufuna kusintha.

AsyncSubject new AsyncSubject() - palibe chomwe chimachitika polembetsa, ndipo mtengowo udzabwezedwa pokhapokha ukamaliza. Mtengo womaliza wokhawo udzabwezedwa.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Zolembazo sizikunena za iye ndipo ndikumuwona koyamba. Ngati wina akudziwa zomwe akuchita, chonde lembani ndipo tidzawonjezera.

Phew. Chabwino, tafotokoza zonse zomwe ndimafuna kukuuzani lero. Ndikukhulupirira kuti chidziwitsochi chinali chothandiza. Mutha kuwerenga mndandanda wazolozera nokha mu tabu yothandiza.

mfundo zothandiza

• Lumikizani kumtsinje
• Momwe JS imagwirira ntchito: mwachidule za injini, makina othamanga, kuyimba foni
• Momwe JS Imagwirira Ntchito: Chochitika Chozungulira, Asynchrony, ndi Njira Zisanu Zokwezera Khodi Yanu ndi async/kuyembekezera
• Momwe Event Loop imagwirira ntchito mu JavaSript
• Kusintha kwa Asynchronous JavaScript
• Kodi RxJS ndi chiyani ndipo n'chifukwa chiyani kuli kofunikira kudziwa za izo?
  
• Kugwiritsa ntchito RxJS
• Maphunziro a RxJS Observables - Kupanga & Kulembetsa ku Zowoneka
• RXJS: Zowoneka Zotentha ndi Zozizira
• Makalasi, ntchito zopanga Observable. Othandizira.
• Othandizira a RxJS Mwachitsanzo
• Mndandanda wa API
• Mitundu Yamutu ndi Madongosolo mu RxJS

Source: www.habr.com