Asynchronous na programming sa JavaScript (Callback, Promise, RxJs)

Kamusta kayong lahat. Si Sergey Omelnitsky ay nakikipag-ugnayan. Hindi pa nagtagal nag-host ako ng stream sa reactive programming, kung saan pinag-usapan ko ang tungkol sa asynchrony sa JavaScript. Ngayon gusto kong kumuha ng mga tala sa materyal na ito.

Ngunit bago natin simulan ang pangunahing materyal, kailangan nating gumawa ng panimulang tala. Kaya magsimula tayo sa mga kahulugan: ano ang stack at queue?

Stack ay isang koleksyon na ang mga elemento ay nakuha sa isang last-in, first-out na LIFO na batayan

Queue ay isang koleksyon na ang mga elemento ay nakuha sa isang first-in, first-out na FIFO na batayan

Okay, magpatuloy tayo.

Ang JavaScript ay isang single-threaded programming language. Nangangahulugan ito na mayroon lamang isang thread ng pagpapatupad at isang stack kung saan ang mga function ay nakapila para sa pagpapatupad. Samakatuwid, ang JavaScript ay maaari lamang magsagawa ng isang operasyon sa isang pagkakataon, habang ang ibang mga operasyon ay maghihintay ng kanilang turn sa stack hanggang sa sila ay tawagin.

Tumawag sa stack ay isang istraktura ng data na, sa madaling salita, nagtatala ng impormasyon tungkol sa lugar sa programa kung nasaan tayo. Kung pumasa tayo sa isang function, itulak natin ang pagpasok nito sa tuktok ng stack. Kapag bumalik kami mula sa isang function, i-pop namin ang pinakamataas na elemento mula sa stack at magtatapos pabalik kung saan tinawag namin ang function. Ito lang ang kayang gawin ng stack. At ngayon isang lubhang kawili-wiling tanong. Paano gumagana ang asynchrony sa JavasScript?

Sa katunayan, bilang karagdagan sa stack, ang mga browser ay may espesyal na pila para sa pagtatrabaho sa tinatawag na WebAPI. Ang mga function sa queue na ito ay isasagawa sa pagkakasunud-sunod lamang pagkatapos na ang stack ay ganap na na-clear. Pagkatapos lamang nito ay itinulak sila mula sa pila papunta sa stack para sa pagpapatupad. Kung mayroong kahit isang elemento sa stack sa ngayon, hindi sila maaaring idagdag sa stack. Ito ay tiyak na dahil dito na ang pagtawag sa mga function sa pamamagitan ng timeout ay madalas na hindi tumpak sa oras, dahil ang function ay hindi maaaring makakuha mula sa queue sa stack habang ito ay puno.

Tingnan natin ang sumusunod na halimbawa at magsimula sa sunud-sunod na pagpapatupad nito. Tingnan din natin kung ano ang nangyayari sa system.

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

1) Wala pang nangyayari. Ang browser console ay malinaw, ang call stack ay walang laman.

2) Pagkatapos ay idinagdag ang command console.log('Hi') sa call stack.

3) At ito ay natupad

4) Pagkatapos console.log('Hi') ay tinanggal mula sa call stack.

5) Ngayon lumipat sa command setTimeout(function cb1() {… }). Ito ay idinagdag sa call stack.

6) Ang setTimeout(function cb1() {… }) command ay pinaandar. Lumilikha ang browser ng timer na bahagi ng Web API. Magsasagawa ito ng countdown.

7) Nakumpleto na ng setTimeout(function cb1() {... }) na utos ang gawain nito at inalis sa call stack.

8) Ang command console.log('Bye') ay idinaragdag sa call stack.

9) Ang console.log('Bye') command ay naisakatuparan.

10) Ang command console.log('Bye') ay tinanggal mula sa call stack.

11) Matapos lumipas ang hindi bababa sa 5000 ms, ang timer ay magtatapos at maglalagay ng callback cb1 sa callback queue.

12) Kinukuha ng event loop ang function cb1 mula sa callback queue at inilalagay ito sa call stack.

13) Ang function na cb1 ay isinasagawa at nagdaragdag ng console.log('cb1') sa call stack.

14) Ang console.log('cb1') command ay naisakatuparan.

15) Ang command console.log('cb1') ay tinanggal mula sa call stack.

16) Ang function na cb1 ay tinanggal mula sa call stack.

Tingnan natin ang isang halimbawa sa dynamics:

Well, tiningnan namin kung paano ipinapatupad ang asynchrony sa JavaScript. Ngayon pag-usapan natin nang maikli ang tungkol sa ebolusyon ng asynchronous code.

Ang ebolusyon ng 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);
                    })
                })
            })
        })
    })
});

Ang asynchronous programming tulad ng alam natin sa JavaScript ay maaari lamang ipatupad ng mga function. Maaari silang maipasa tulad ng anumang iba pang variable sa iba pang mga function. Ito ay kung paano ipinanganak ang mga callback. At ito ay cool, masaya at mapaglaro, hanggang sa ito ay nagiging kalungkutan, mapanglaw at kalungkutan. Bakit? Ito ay simple:

• Habang tumataas ang pagiging kumplikado ng code, mabilis na nagiging malabo, paulit-ulit na nested block ang proyekto - "callback hell".
• Ang paghawak ng error ay madaling makaligtaan.
• Hindi ka maaaring magbalik ng mga expression na may return.

Sa pagdating ng Pangako, medyo naging maayos ang sitwasyon.

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

• Lumitaw ang mga chain ng pangako, na nagpahusay sa pagiging madaling mabasa ng code
• Ang isang hiwalay na paraan para sa paghuli ng mga error ay lumitaw
• Idinagdag ang posibilidad ng parallel execution gamit ang Promise.all
• Mareresolba natin ang nested asynchrony gamit ang async/wait

Ngunit ang mga pangako ay may mga limitasyon. Halimbawa, hindi maaaring kanselahin ang isang pangako nang hindi sumasayaw gamit ang tamburin, at ang pinakamahalaga ay gumagana ito sa isang halaga.

Well, maayos naming nilapitan ang reactive programming. Pagod? Sa kabutihang palad, maaari kang gumawa ng ilang tsaa, pag-isipan ito at bumalik upang magbasa pa. At ipagpapatuloy ko.

Reaktibong programming ay isang programming paradigm na nakatuon sa mga daloy ng data at pagbabago ng pagpapalaganap. Tingnan natin kung ano ang stream ng data.

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

const eventsArray = [];

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

Isipin natin na mayroon tayong field ng input. Gumagawa kami ng array, at para sa bawat input event keyup ay iimbak namin ang event sa aming array. Kasabay nito, nais kong tandaan na ang aming array ay pinagsunod-sunod ayon sa oras, i.e. ang index ng mga susunod na pangyayari ay mas malaki kaysa sa index ng mga naunang pangyayari. Ang nasabing array ay isang pinasimpleng modelo ng isang daloy ng data, ngunit hindi pa ito isang daloy. Upang ang array na ito ay ligtas na matawag na stream, dapat na kahit papaano ay maipaalam nito sa mga subscriber na may dumating na bagong data dito. Kaya dumating tayo sa kahulugan ng daloy.

Stream ng data

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

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

Daloy ay isang hanay ng data na pinagsunod-sunod ayon sa oras na maaaring magpahiwatig na ang data ay nagbago. Ngayon isipin kung gaano kaginhawa ang pagsulat ng code kung saan ang isang aksyon ay nangangailangan ng pagtawag ng ilang mga kaganapan sa iba't ibang bahagi ng code. Nag-subscribe lang kami sa stream at aabisuhan kami nito kapag naganap ang mga pagbabago. At magagawa ito ng RxJs library.

RxJS ay isang library para sa pagtatrabaho sa mga asynchronous at event-based na mga programa gamit ang mga nakikitang pagkakasunud-sunod. Ang aklatan ay nagbibigay ng isang pangunahing uri Napapansin, ilang uri ng auxiliary (Tagamasid, Tagapag-iskedyul, Mga Paksa) at mga operator para sa pagtatrabaho sa mga kaganapan tulad ng sa mga koleksyon (mapa, salain, bawasan, bawat at mga katulad mula sa JavaScript Array).

Unawain natin ang mga pangunahing konsepto ng aklatang ito.

Observable, Observer, Producer

Ang napapansin ay ang unang pangunahing uri na titingnan natin. Ang klase na ito ay naglalaman ng pangunahing bahagi ng pagpapatupad ng RxJs. Ito ay nauugnay sa isang nakikitang stream, na maaaring i-subscribe gamit ang paraan ng pag-subscribe.

Ang Observable ay nagpapatupad ng mekanismo ng katulong para sa paglikha ng mga update, ang tinatawag na Tagapagmasid. Ang pinagmulan ng mga halaga para sa Observer ay tinatawag Tagagawa. Ito ay maaaring isang array, iterator, web socket, ilang uri ng kaganapan, atbp. Kaya masasabi nating ang observable ay isang conductor sa pagitan ng Producer at Observer.

Pinangangasiwaan ng Observable ang tatlong uri ng mga kaganapan ng Observer:

• susunod – bagong data
• error – error kung natapos ang sequence dahil sa exception. ang kaganapang ito ay nagpapahiwatig din ng pagkumpleto ng pagkakasunud-sunod.
• complete — signal tungkol sa pagkumpleto ng sequence. Nangangahulugan ito na wala nang bagong data.

Tingnan natin ang demo:

Sa simula ay ipoproseso namin ang mga halaga 1, 2, 3, at pagkatapos ng 1 segundo. makakakuha tayo ng 4 at tapusin ang ating stream.

Nag-iisip nang malakas

At pagkatapos ay natanto ko na ang pagsasabi nito ay mas kawili-wili kaysa sa pagsusulat tungkol dito. 😀

suskrisyon

Kapag nag-subscribe kami sa isang stream, gumagawa kami ng bagong klase subscriptionna nagbibigay sa amin ng kakayahang mag-unsubscribe gamit ang pamamaraan unsubscribe. Maaari rin kaming magpangkat ng mga subscription gamit ang pamamaraan idagdag. Well, lohikal na maaari nating i-ungroup ang mga thread na ginagamit alisin. Ang mga paraan ng pagdaragdag at pag-alis ay tumatanggap ng isa pang subscription bilang input. Gusto kong tandaan na kapag nag-unsubscribe kami, nag-unsubscribe kami sa lahat ng subscription ng bata na para bang tinawag nila ang paraan ng pag-unsubscribe. Sige lang.

Mga uri ng batis

HOT
MALAMIG

Ang producer ay nilikha sa labas na napapansin
Ang producer ay nilikha sa loob na mapapansin

Ang data ay inililipat sa oras na ang nakikita ay nilikha
Ang data ay ibinibigay sa oras ng subscription

Kailangan ng karagdagang lohika para sa pag-unsubscribe
Ang thread ay nagtatapos sa sarili nitong

Gumagamit ng one-to-many na relasyon
Gumagamit ng one-to-one na relasyon

Ang lahat ng mga subscription ay may parehong kahulugan
Ang mga subscription ay independyente

Maaaring mawala ang data kung wala kang subscription
Muling inilalabas ang lahat ng halaga ng stream para sa isang bagong subscription

Upang magbigay ng isang pagkakatulad, iisipin ko ang isang mainit na stream bilang isang pelikula sa isang teatro. Sa anong oras ka dumating, mula sa sandaling iyon ay nagsimula kang manood. Ihahambing ko ang malamig na daloy sa isang tawag sa teknolohiya. suporta. Sinumang tumatawag ay nakikinig sa pag-record ng voicemail mula simula hanggang matapos, ngunit maaari kang mag-hang up gamit ang pag-unsubscribe.

Nais kong tandaan na mayroon ding mga tinatawag na mainit na daloy (naranasan ko ang kahulugang ito na napakabihirang at sa mga dayuhang komunidad lamang) - ito ay isang daloy na nagbabago mula sa malamig na daloy patungo sa mainit. Ang tanong ay lumitaw - kung saan gagamitin)) Magbibigay ako ng isang halimbawa mula sa pagsasanay.

Nagtatrabaho ako sa Angular. Siya ay aktibong gumagamit ng rxjs. Upang makatanggap ng data sa server, inaasahan ko ang isang malamig na thread at gamitin ang thread na ito sa template gamit ang asyncPipe. Kung gagamitin ko ang pipe na ito nang maraming beses, kung gayon, bumalik sa kahulugan ng isang malamig na stream, ang bawat pipe ay hihiling ng data mula sa server, na kung saan ay kakaiba na sabihin ang hindi bababa sa. At kung gagawin kong mainit ang malamig na stream, mangyayari ang kahilingan nang isang beses.

Sa pangkalahatan, ang pag-unawa sa uri ng mga daloy ay medyo mahirap para sa mga nagsisimula, ngunit mahalaga.

Operator

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

Ang mga operator ay nagbibigay sa amin ng kakayahang palawakin ang aming kakayahang magtrabaho sa mga stream. Tumutulong sila sa pagkontrol sa mga kaganapang nagaganap sa Observable. Titingnan namin ang ilan sa mga pinakasikat, at higit pang mga detalye tungkol sa mga operator ay matatagpuan gamit ang mga link sa kapaki-pakinabang na impormasyon.

Mga operator - ng

Magsimula tayo sa auxiliary operator ng. Lumilikha ito ng isang Observable batay sa isang simpleng halaga.

Mga operator - filter

Ang filter operator, gaya ng iminumungkahi ng pangalan, ay nagsasala ng stream signal. Kung totoo ang ibinalik ng operator, lalaktawan pa ito.

Mga operator - kunin

tumagal - Kinukuha ang halaga ng bilang ng mga naglalabas, pagkatapos nito ay nagtatapos ang thread.

Mga operator - debounceTime

debounceTime - itinatapon ang mga inilabas na halaga na nasa loob ng tinukoy na agwat ng oras sa pagitan ng mga output - pagkatapos lumipas ang agwat ng oras, naglalabas ng huling halaga.

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

Mga operator - takeWhile

Nagpapalabas ng mga halaga hanggang sa takeWhile ay nagbabalik ng false, pagkatapos nito ay nag-unsubscribe ito sa 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 )
);  

Operators - combineLatest

Ang combineLatest operator ay medyo katulad ng promise.all. Pinagsasama nito ang maraming mga thread sa isa. Matapos ang bawat thread ay gumawa ng hindi bababa sa isang paglabas, makuha namin ang pinakabagong mga halaga mula sa bawat isa sa anyo ng isang array. Dagdag pa, pagkatapos ng anumang paglabas mula sa pinagsamang mga stream, magbibigay ito ng mga bagong halaga.

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

Mga operator - zip

Zip - Naghihintay ng value mula sa bawat thread at bumubuo ng array batay sa mga value na ito. Kung ang halaga ay hindi nagmumula sa anumang thread, hindi mabubuo ang grupo.

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

Mga operator - forkJoin

Ang forkJoin ay sumasali rin sa mga thread, ngunit naglalabas lamang ito ng halaga kapag kumpleto na ang lahat ng mga thread.

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

Mga operator - mapa

Binabago ng operator ng pagbabago ng mapa ang halaga ng emitter sa isang bago.

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

Mga operator – ibahagi, tapikin

Pinapayagan ka ng tap operator na gumawa ng mga side effect, iyon ay, anumang mga aksyon na hindi nakakaapekto sa pagkakasunud-sunod.

Ang operator ng share utility ay maaaring gawing mainit ang malamig na stream.

Tapos na kami sa mga operator. Lumipat tayo sa Paksa.

Nag-iisip nang malakas

At pagkatapos ay uminom ako ng tsaa. Sawa na ako sa mga halimbawang ito 😀

Pamilya ng paksa

Ang pamilya ng paksa ay isang pangunahing halimbawa ng mainit na daloy. Ang mga klase na ito ay isang uri ng hybrid na kumikilos nang sabay-sabay bilang observable at observer. Dahil ang paksa ay isang mainit na thread, kinakailangan na mag-unsubscribe mula dito. Kung pinag-uusapan natin ang mga pangunahing pamamaraan, kung gayon ang mga ito ay:

• susunod – paglilipat ng bagong data sa stream
• error - error at pagwawakas ng thread
• kumpleto – pagkumpleto ng thread
• mag-subscribe - mag-subscribe sa isang stream
• mag-unsubscribe – mag-unsubscribe mula sa stream
• asObservable – transform sa isang observer
• toPromise – nagiging isang pangako

Mayroong 4 5 uri ng mga paksa.

Nag-iisip nang malakas

Mayroong 4 na tao na nag-uusap sa batis, ngunit ito pala ay nagdagdag sila ng isa pa. Sabi nga nila, mabuhay at matuto.

Simpleng Paksa new Subject()– ang pinakasimpleng uri ng mga paksa. Nilikha nang walang mga parameter. Nagpapadala ng mga halaga na natanggap lamang pagkatapos ng subscription.

BehaviorSubject new BehaviorSubject( defaultData<T> ) – sa aking palagay, ang pinakakaraniwang uri ng paksa. Kinukuha ng input ang default na halaga. Palaging i-save ang data ng huling isyu, na ipinapadala kapag nag-subscribe. Ang klase na ito ay mayroon ding kapaki-pakinabang na paraan ng halaga, na nagbabalik ng kasalukuyang halaga ng stream.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) — Maaaring opsyonal na kunin ng input bilang unang argumento ang laki ng buffer ng mga halaga na iimbak nito sa sarili nito, at bilang pangalawa ang oras kung kailan kailangan natin ng mga pagbabago.

AsyncSubject new AsyncSubject() — walang nangyayari kapag nag-subscribe, at ang halaga ay ibabalik lamang kapag kumpleto na. Tanging ang huling halaga ng stream ang ibabalik.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — Ang dokumentasyon ay tahimik tungkol sa kanya at nakita ko siya sa unang pagkakataon. Kung may nakakaalam kung ano ang kanyang ginagawa, mangyaring sumulat at idagdag namin ito.

Phew. Buweno, napag-usapan namin ang lahat ng gusto kong sabihin sa iyo ngayon. Sana ay naging kapaki-pakinabang ang impormasyong ito. Mababasa mo mismo ang listahan ng mga sanggunian sa tab na kapaki-pakinabang na impormasyon.

helpful impormasyon

• Link sa stream
• Paano gumagana ang JS: pangkalahatang-ideya ng engine, mga mekanismo ng runtime, call stack
• Paano Gumagana ang JS: Event Loop, Asynchrony, at Limang Paraan para Pagbutihin ang Iyong Code nang may async/naghihintay
• Paano gumagana ang Event Loop sa JavaSript
• Ang Ebolusyon ng Asynchronous JavaScript
• Ano ang RxJS at bakit kapaki-pakinabang na malaman ang tungkol dito?
  
• Praktikal na aplikasyon ng RxJS
• Tutorial sa RxJS Observables — Paglikha at Pag-subscribe sa Observables
• RXJS: Mainit at Malamig na Namamasid
• Mga klase, mga function para sa paglikha ng Observable. Mga operator.
• Mga Operator ng RxJS Sa pamamagitan ng Halimbawa
• Listahan ng API
• Mga Uri ng Paksa at Iskedyul sa RxJS

Pinagmulan: www.habr.com