Asinhronā programmēšana JavaScript (atzvanīšana, solījums, RxJs)

Sveiki visiem. Sergejs Omeļņickis sazinās. Pirms neilga laika es uzņēmu straumi par reaktīvo programmēšanu, kurā es runāju par asinhroniju JavaScript. Šodien es vēlētos veikt piezīmes par šo materiālu.

Bet pirms mēs sākam galveno materiālu, mums ir jāizdara ievada piezīme. Tātad, sāksim ar definīcijām: kas ir kaudze un rinda?

Kaudze ir kolekcija, kuras elementi tiek iegūti, pamatojoties uz LIFO principu

Rinda ir kolekcija, kuras elementi iegūti pēc FIFO principa “pirmais iekšā, pirmais ārā”.

Labi, turpināsim.

JavaScript ir viena pavediena programmēšanas valoda. Tas nozīmē, ka ir tikai viens izpildes pavediens un viens steks, kurā funkcijas tiek ievietotas izpildes rindā. Tāpēc JavaScript vienlaikus var veikt tikai vienu darbību, savukārt citas darbības gaidīs savu kārtu stekā, līdz tās tiks izsauktas.

zvanu kaudze ir datu struktūra, kas, vienkārši sakot, ieraksta informāciju par vietu programmā, kur mēs atrodamies. Ja mēs pārejam uz funkciju, mēs virzām tās ievadi uz kaudzes augšdaļu. Atgriežoties no funkcijas, mēs izceļam augšējo elementu no kaudzes un nonākam atpakaļ vietā, kur nosaucām funkciju. Tas ir viss, ko kaudze var darīt. Un tagad ārkārtīgi interesants jautājums. Kā tad asinhronija darbojas JavaScript?

Faktiski, papildus kaudzei, pārlūkprogrammām ir īpaša rinda darbam ar tā saukto WebAPI. Funkcijas šajā rindā tiks izpildītas kārtībā tikai pēc tam, kad steka būs pilnībā notīrīta. Tikai pēc tam tie tiek nospiesti no rindas uz steku izpildei. Ja kaudzē šobrīd ir vismaz viens elements, tad tos nevar pievienot stekam. Tieši šī iemesla dēļ funkciju izsaukšana pēc taimauta bieži vien nav precīza laikā, jo funkcija nevar nokļūt no rindas uz steku, kamēr tā ir pilna.

Apskatīsim šo piemēru un sāksim ar tā soli pa solim izpildi. Paskatīsimies arī, kas notiek sistēmā.

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

1) Pagaidām nekas nenotiek. Pārlūka konsole ir skaidra, zvanu steka ir tukša.

2) Pēc tam komanda console.log('Hi') tiek pievienota zvanu stekam.

3) Un tas ir izpildīts

4) Pēc tam console.log('Hi') tiek noņemts no zvanu steka.

5) Tagad pārejiet uz komandu setTimeout (funkcija cb1() {… }). Tas tiek pievienots zvanu stekam.

6) Tiek izpildīta komanda setTimeout(function cb1() {… }). Pārlūkprogramma izveido taimeri, kas ir daļa no Web API. Tas veiks atpakaļskaitīšanu.

7) komanda setTimeout(function cb1() {... }) ir pabeigusi savu darbu un tiek noņemta no izsaukuma steka.

8) Izsaukuma stekam tiek pievienota komanda console.log('Bye').

9) Tiek izpildīta komanda console.log('Bye').

10) Komanda console.log('Bye') tiek noņemta no zvanu steka.

11) Kad ir pagājuši vismaz 5000 ms, taimeris pārtrauc darbību un ievieto atzvanīšanas cb1 atzvanīšanas rindā.

12) Notikuma cilpa paņem funkciju cb1 no atzvanīšanas rindas un ievieto to zvanu stekā.

13) Funkcija cb1 tiek izpildīta un pievieno console.log('cb1') izsaukuma stekam.

14) Tiek izpildīta komanda console.log('cb1').

15) Komanda console.log('cb1') tiek noņemta no izsaukumu steka.

16) Funkcija cb1 tiek noņemta no zvanu steka.

Apskatīsim piemēru dinamikā:

Mēs apskatījām, kā JavaScript tiek ieviesta asinhronija. Tagad īsi parunāsim par asinhronā koda attīstību.

Asinhronā koda attīstība.

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

Asinhrono programmēšanu, kādu mēs to zinām JavaScript, var ieviest tikai ar funkcijām. Tos tāpat kā jebkuru citu mainīgo var nodot citām funkcijām. Tā radās atzvani. Un tas ir forši, jautri un rotaļīgi, līdz pārvēršas skumjās, melanholijā un skumjās. Kāpēc? Tas ir vienkārši:

• Palielinoties koda sarežģītībai, projekts ātri pārvēršas neskaidros, atkārtoti ligzdotos blokos - “atzvanīšanas elle”.
• Kļūdu apstrādi var viegli palaist garām.
• Jūs nevarat atgriezt izteiksmes ar atgriešanu.

Līdz ar solījuma parādīšanos situācija kļuva nedaudz labāka.

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

• Parādījās solījumu ķēdes, kas uzlaboja koda lasāmību
• Ir parādījusies atsevišķa metode kļūdu uztveršanai
• Pievienota paralēlas izpildes iespēja, izmantojot Promise.all
• Mēs varam atrisināt ligzdoto asinhroniju, izmantojot async/await

Taču solījumiem ir savi ierobežojumi. Piemēram, solījumu nevar atcelt, nedejojot ar tamburīnu, un vissvarīgākais ir tas, ka tas darbojas ar vienu vērtību.

Nu, mēs esam gludi pietuvojušies reaktīvai programmēšanai. Noguris? Par laimi, jūs varat doties uzvārīt tēju, padomāt par to un atgriezties, lai lasītu vairāk. Un es turpināšu.

Reaktīvā programmēšana ir programmēšanas paradigma, kas vērsta uz datu plūsmām un izmaiņu izplatīšanu. Sīkāk apskatīsim, kas ir datu straume.

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

const eventsArray = [];

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

Iedomāsimies, ka mums ir ievades lauks. Mēs veidojam masīvu, un katram ievades notikuma taustiņam mēs saglabāsim notikumu savā masīvā. Tajā pašā laikā vēlos atzīmēt, ka mūsu masīvs ir sakārtots pēc laika, t.i. vēlāko notikumu indekss ir lielāks nekā agrāko notikumu indekss. Šāds masīvs ir vienkāršots datu plūsmas modelis, taču tas vēl nav plūsma. Lai šo masīvu varētu droši saukt par straumi, tam ir jāspēj kaut kādā veidā informēt abonentus, ka tajā ir ienākuši jauni dati. Tādējādi mēs nonākam pie plūsmas definīcijas.

Datu straume

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

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

Plūsma ir datu masīvs, kas sakārtots pēc laika un var norādīt, ka dati ir mainījušies. Tagad iedomājieties, cik ērti kļūst rakstīt kodu, kurā vienai darbībai ir nepieciešams izsaukt vairākus notikumus dažādās koda daļās. Mēs vienkārši abonējam straumi, un tā mums paziņos, kad notiks izmaiņas. Un RxJs bibliotēka to var izdarīt.

RxJS ir bibliotēka darbam ar asinhronām un uz notikumiem balstītām programmām, izmantojot novērojamas secības. Bibliotēka nodrošina pamata veidu Novērojams, vairāki papildu veidi (Novērotājs, Plānotāji, Subjekti) un operatori darbam ar pasākumiem kā ar kolekcijām (kartēt, filtrēt, samazināt, katru un līdzīgas no JavaScript masīva).

Izpratīsim šīs bibliotēkas pamatjēdzienus.

Vērojams, novērotājs, producents

Novērojamais ir pirmais pamata veids, ko mēs apskatīsim. Šajā klasē ir galvenā RxJs ieviešanas daļa. Tas ir saistīts ar novērojamu straumi, kuru var abonēt, izmantojot abonēšanas metodi.

Observable ievieš palīgmehānismu atjauninājumu izveidei, tā saukto Novērotājs. Tiek saukts novērotāja vērtību avots Producents. Tas varētu būt masīvs, iterators, tīmekļa ligzda, kāds notikums utt. Tātad mēs varam teikt, ka novērojamais ir diriģents starp producentu un novērotāju.

Observable apstrādā trīs veidu Observer notikumus:

• nākamais – jauni dati
• kļūda – kļūda, ja secība beidzās izņēmuma dēļ. šis notikums nozīmē arī secības pabeigšanu.
• pabeigts — signāls par secības pabeigšanu. Tas nozīmē, ka jaunu datu vairs nebūs.

Apskatīsim demonstrāciju:

Sākumā mēs apstrādāsim vērtības 1, 2, 3 un pēc 1 sekundes. mēs saņemsim 4 un beigsim mūsu straumi.

Skaļi domājot

Un tad es sapratu, ka stāstīt ir interesantāk nekā rakstīt par to. 😀

Abonēšana

Kad abonējam straumi, mēs izveidojam jaunu klasi abonementskas dod mums iespēju anulēt abonementu, izmantojot metodi atrakstīties. Mēs varam arī grupēt abonementus, izmantojot metodi pievienot. Ir loģiski, ka mēs varam atgrupēt pavedienus, izmantojot noņemt. Pievienošanas un noņemšanas metodes kā ievadi pieņem citu abonementu. Es vēlos atzīmēt, ka, anulējot abonementu, mēs anulējam visus bērnu abonementus, it kā viņi būtu izsaukuši abonēšanas atcelšanas metodi. Uz priekšu.

Straumju veidi

HOT
Auksts

Producents ir izveidots ārpus novērojama
Producents ir izveidots iekšā novērojams

Dati tiek pārsūtīti brīdī, kad tiek izveidots novērojums
Dati tiek sniegti abonēšanas brīdī

Nepieciešama papildu loģika abonēšanas atcelšanai
Vītne beidzas pati no sevis

Izmanto attiecības viens pret daudziem
Izmanto attiecības viens pret vienu

Visiem abonementiem ir vienāda nozīme
Abonementi ir neatkarīgi

Dati var tikt zaudēti, ja jums nav abonementa
Atkārtoti izdod visas straumes vērtības jaunam abonementam

Lai sniegtu analoģiju, es domāju par karstu straumi kā filmu teātrī. Kurā brīdī jūs ieradāties, no šī brīža jūs sākāt skatīties. Es salīdzinātu aukstu plūsmu ar zvanu tehnoloģiju jomā. atbalsts. Jebkurš zvanītājs noklausās balss pasta ierakstu no sākuma līdz beigām, taču jūs varat pārtraukt klausuli, izmantojot anulēt abonementu.

Vēlos atzīmēt, ka ir arī tā saucamās siltās plūsmas (ar šo definīciju esmu sastapies ārkārtīgi reti un tikai ārzemju kopienās) - šī ir plūsma, kas no aukstās plūsmas pārvēršas karstā. Rodas jautājums - kur izmantot)) Es sniegšu piemēru no prakses.

Es strādāju ar Angular. Viņš aktīvi izmanto rxjs. Lai saņemtu datus serverī, es sagaidu aukstu pavedienu un izmantoju šo pavedienu veidnē, izmantojot asyncPipe. Ja es izmantoju šo cauruli vairākas reizes, tad, atgriežoties pie aukstās straumes definīcijas, katra caurule pieprasīs datus no servera, kas ir maigi izsakoties dīvaini. Un, ja es pārvēršu aukstu straumi siltā, tad pieprasījums notiks vienu reizi.

Kopumā iesācējiem ir diezgan grūti saprast plūsmu veidu, taču tas ir svarīgi.

Uzņēmējiem

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

Operatori nodrošina mums iespēju paplašināt mūsu iespējas strādāt ar straumēm. Tie palīdz kontrolēt notikumus, kas notiek novērojamajā. Apskatīsim pāris populārākos, un sīkāku informāciju par operatoriem var atrast, izmantojot noderīgajā informācijā esošās saites.

Operatori - no

Sāksim ar palīgoperatoru. Tas izveido novērojamo, pamatojoties uz vienkāršu vērtību.

Operatori - filtrs

Filtra operators, kā norāda nosaukums, filtrē straumes signālu. Ja operators atgriež true, tas izlaiž tālāk.

Operatori - ņemiet

take — ņem izstarotāju skaita vērtību, pēc kura vītne beidzas.

Operatori — debounceTime

debounceTime - atmet izstarotās vērtības, kas ietilpst norādītajā laika intervālā starp izvadēm - pēc laika intervāla beigām izstaro pēdējo vērtību.

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

Operatori — takeWhile

Izstaro vērtības, līdz takeWhile atgriež false, pēc tam tiek atcelta pavediena abonēšana.

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

Operatori - apvienotJaunākais

CombinLatest operators ir nedaudz līdzīgs solīdam.all. Tas apvieno vairākus pavedienus vienā. Pēc tam, kad katrs pavediens veic vismaz vienu emisiju, mēs iegūstam jaunākās vērtības no katra masīva veidā. Turklāt pēc jebkādas emisijas no apvienotajām plūsmām tas dos jaunas vērtības.

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

Operatori - zip

Zip — gaida vērtību no katra pavediena un veido masīvu, pamatojoties uz šīm vērtībām. Ja vērtība nenāk no neviena pavediena, grupa netiks izveidota.

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

Operatori - forkJoin

forkJoin arī savieno pavedienus, taču tas izstaro vērtību tikai tad, kad visi pavedieni ir pabeigti.

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

Operatori - karte

Kartes transformācijas operators pārveido emitētāja vērtību jaunā.

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

Operatori – kopīgojiet, pieskarieties

Pieskaršanās operators ļauj veikt blakusparādības, tas ir, jebkuras darbības, kas neietekmē secību.

Dalīšanas utilīta operators var pārvērst aukstu straumi karstā.

Esam pabeiguši darbu ar operatoriem. Pārejam pie tēmas.

Skaļi domājot

Un tad es devos iedzert tēju. Man ir apnikuši šie piemēri 😀

Priekšmeta ģimene

Priekšmeta saime ir lielisks karsto plūsmu piemērs. Šīs klases ir sava veida hibrīds, kas vienlaikus darbojas kā novērojams un novērotājs. Tā kā tēma ir aktuāla, ir jāatsakās no tā abonēšanas. Ja mēs runājam par galvenajām metodēm, tad tās ir:

• nākamais – jaunu datu pārsūtīšana uz straumi
• kļūda – kļūda un pavediena pārtraukšana
• pabeigt – pavediena pabeigšana
• abonēt — abonēt straumi
• atteikties no straumes abonēšanas
• asObservable – pārveidoties par novērotāju
• toPromise – pārvēršas par solījumu

Ir 4 5 priekšmetu veidi.

Skaļi domājot

Straumē runāja 4 cilvēki, bet izrādījās, ka viņi pievienoja vēl vienu. Kā saka, dzīvo un mācies.

Vienkāršs priekšmets new Subject()– vienkāršākais priekšmetu veids. Izveidots bez parametriem. Pārsūta vērtības, kas saņemtas tikai pēc abonēšanas.

BehaviorSubject new BehaviorSubject( defaultData<T> ) – manuprāt, visizplatītākais priekšmeta veids. Ievade iegūst noklusējuma vērtību. Vienmēr saglabā pēdējā numura datus, kas tiek pārsūtīti abonēšanas laikā. Šai klasei ir arī noderīga vērtību metode, kas atgriež straumes pašreizējo vērtību.

Replay Subject new ReplaySubject(bufferSize?: number, windowTime?: number) — Ievade pēc izvēles var izmantot kā pirmo argumentu vērtību bufera lielumu, ko tā saglabās sevī, un kā otro argumentu, kurā mums ir nepieciešamas izmaiņas.

AsyncSubject new AsyncSubject() — abonēšanas laikā nekas nenotiek, un vērtība tiks atgriezta tikai tad, kad tā būs pabeigta. Tiks atgriezta tikai pēdējā straumes vērtība.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — Dokumentācija par viņu klusē, un es viņu redzu pirmo reizi. Ja kāds zina ar ko viņš nodarbojas, lūdzu rakstiet un mēs pievienosim.

Fū. Mēs esam apskatījuši visu, ko es šodien gribēju jums pastāstīt. Ceru, ka šī informācija bija noderīga. Atsauču sarakstu varat izlasīt pats noderīgas informācijas cilnē.

noderīga informācija

• Saite uz straumi
• Kā darbojas JS: pārskats par dzinēju, izpildlaika mehānismiem, zvanu steku
• Kā darbojas JS: notikumu cilpa, asinhronija un pieci veidi, kā uzlabot kodu, izmantojot asinhronizāciju/gaidīšanu
• Kā Event Loop darbojas JavaSript
• Asinhronā JavaScript evolūcija
• Kas ir RxJS un kāpēc ir noderīgi zināt par to?
  
• RxJS praktiskais pielietojums
• RxJS Observables apmācība — novērojamo elementu izveide un abonēšana
• RXJS: novērojami karsti un auksti
• Klases, funkcijas Vērojamā izveidei. Operatori.
• RxJS operatori pēc piemēra
• API saraksts
• Priekšmeta un grafiku šķirnes RxJS

Avots: www.habr.com