Programimi asinkron në JavaScript. ( Callback, Promise, RxJs )

Përshëndetje të gjithëve. Këtu është Sergey Omel'nytskyi. Kohët e fundit kam mbajtur një transmision në lidhje me programimin reaktiv, ku tregova për asinkronicitetin në JavaScript. Sot do të doja të përmbledh këtë materiale.

Por para se të fillojmë me materialin kryesor, na nevojitet një hyrje. Pra, le të fillojmë me përkufizimet: çfarë është steku dhe queues?
Steku është një koleksion, elementët e të cilit merren sipas parimit "i fundit i ardhur, i pari i dalë" LIFO
Queue është një koleksion, elementët e të cilit merren sipas parimit "i pari i ardhur, i pari i dalë" FIFO

Mirë, vazhdojmë.

JavaScript është një gjuhë programimi me një thread. Kjo do të thotë se ka vetëm një thread ekzekutimi dhe një stek, në të cilin vendosen funksionet për ekzekutim. Prandaj, në një moment të vetëm, JavaScript mund të ekzekutojë vetëm një operacion, ndërsa operacionet e tjera do të presin në radhë në stek derisa të thirren.

Steku i thirrjeve është një strukturë të dhënash që, në mënyrë të thjeshtë, regjistron informacionin mbi vendin në program ku ndodhemi. Kur kalojmë në një funksion, vendosim një regjistrim të tij në krye të stekut. Kur kthehemi nga funksioni, heqim elementin më të sipërm nga steku dhe kthehemi aty ku e kemi thirrur këtë funksion. Këto janë të gjitha aftësitë e stekut. Tani, pyetja shumë interesante. Si funksionon asinkroniciteti në JavaScript?

Në të vërtetë, përveç stekut, në shfletues ekziston një radhë e veçantë për të punuar me atë që quhet WebAPI. Funksionet në këtë radhë do të ekzekutohen me rend vetëm pasi steku të pastruar plotësisht. Vetëm pas kësaj ato vendosen nga radhë në stek për ekzekutim. Nëse në stek në këtë moment ndodhet të paktën një element, ato nuk mund të hyjnë në stek. Pikërisht për këtë arsye thirrja e funksioneve me vonesë shpesh është e pasaktë në kohë, pasi funksioni nuk mund të hyjë nga radhë në stek derisa ai të jetë plot.

Le të shqyrtojmë shembullin e mëposhtëm dhe të merremi me "ekzekutimin" e tij hap pas hapi. Po ashtu, le të shohim se çfarë ndodh me këtë në sistem.

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

1) Deri tani nuk ndodh asgjë. Konsola e shfletuesit është e pastër, steku i thirrjeve është bosh.

2) Më pas komanda console.log('Hi') shtohet në stekun e thirrjeve.

3) Dhe ajo ekzekutohet

4) Pastaj, console.log('Hi') hiqet nga stoku i thirrjeve.

5) Tani kalojmë te komanda setTimeout(function cb1() {… }). Ajo shtohet në stoku i thirrjeve.

6) Komanda setTimeout(function cb1() {… }) ekzekutohet. Shfletuesi krijon një timer, që është pjesë e Web API. Ai do të realizojë një numërim mbrapsht.

7) Komanda setTimeout(function cb1() {… }) përfundon punën dhe hiqet nga stoku i thirrjeve.

8) Komanda console.log('Bye') shtohet në stoku i thirrjeve.

9) Komanda console.log('Bye') ekzekutohet.

10) Komanda console.log('Bye') hiqet nga stoku i thirrjeve.

11) Pasi të kalojnë të paktën 5000 ms., timer-i përfundon punën dhe vendos callback-un cb1 në radhën e callbacks.

12) Cikli i ngjarjeve merr funksionin cb1 nga radhja e callbacks dhe e vendos atë në stoku i thirrjeve.

13) Funksioni cb1 ekzekutohet dhe shton console.log('cb1') në stoku i thirrjeve.

14) Komanda console.log('cb1') ekzekutohet.

15) Komanda console.log('cb1') hiqet nga stoku i thirrjeve.

16) Funksioni cb1 hiqet nga stoku i thirrjeve.

Shikojmë një shembull në dinamikë:

Ja se si e kemi shqyrtuar se si asinkronizimi është realizuar në JavaScript. Tani le të flasim shkurt për evolucionin e kodit asinkron.

Evolucioni i kodit asinkron.

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

Programimi asinkron, siç e njohim ne JavaScript, mund të realizohet vetëm me funksione. Ato mund të kalohen si çdo variabël tjetër te funksione të tjera. Kështu lindi callback-u. Dhe është argëtues derisa të kthehet në trishtim dhe mërzi. Pse? Sepse është e thjeshtë:

• Me rritjen e kompleksitetit të kodit, projekti shpejt kthehet në blloqe shumë të thelluara, një situatë që quhet "helli i callbacks".
• Menaxhimi i gabimeve mund të humbasë lehtësisht.
• Nuk mund të kthehen shprehje me return.

Me shfaqjen e Promise, situata u bë pak më e mirë.

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

• Lindi zinxhirët e promesave, që përmirësuan lexueshmërinë e kodit.
• Lindi një metodë e veçantë për kapjen e gabimeve.
• Ka ardhur mundësia e ekzekutimit paralel me ndihmën e Promise.all
• Ne mund ta zgjidhim asinkroninë e thellë me ndihmën e async/await

Por premtimi ka kufizimet e veta. Për shembull, një premtim nuk mund të Anulohet pa ndihmën e ndonjë triku, dhe ajo që ka rëndësi - punon me një vlerë.

Ja, tani jemi afruar me programimin reaktiv. Të lodhur? Fatmirësisht, mund të shkoni të bëni një çaj, të reflektoni dhe të ktheheni për të lexuar më tej. Unë do të vazhdoj.

Programimi reaktiv— është një paradigmë programimi që fokusohet në rrjedhat e të dhënave dhe përhapjen e ndryshimeve. Le të shqyrtojmë më në detaje se çfarë është një rrjedhë të dhënash.

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

const eventsArray = [];

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

Imagjinoni se kemi një fushë hyrjeje. Ne krijojmë një array, dhe për çdo ngjarje keyup të inputit, do të ruajmë ngjarjen në array-in tonë. Në këtë rast, duhet të theksojmë se array-i ynë është i renditur sipas kohës, pra indeksi i ngjarjeve më të vonshme është më i madh se indeksi i ngjarjeve më të hershme. Ky array paraqet një model të thjeshtuar të rrjedhës së të dhënave, por akoma nuk është një rrjedhë. Për ta quajtur këtë array me të drejtë një rrjedhë, ai duhet të jetë në gjendje të komunikojë ndonjë mënyrë me abonentët se janë pranuar të dhëna të reja. Kështu kemi arritur në definimin e rrjedhës.

Rrjedha e të dhënave

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

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

Rrjedha— është një array i të dhënave të renditura sipas kohës, i cili mund të komunikojë se të dhënat janë ndryshuar. Tani imagjinoni se sa e lehtë bëhet të shkruani kod, në të cilin për një veprim kërkohen të thirren disa ngjarje në pjesë të ndryshme të kodit. Ne thjesht abonohemi në rrjedhë dhe ajo na informon kur ndodhin ndryshimet. Kjo është ajo që bën biblioteka RxJs.

RxJS — është një bibliotekë për të punuar me programe asinkrone dhe të bazuara në ngjarje duke përdorur sekuenca të vëzhguara. Biblioteka ofron tipin kryesor Observable, disa tipe ndihmëse (Observer, Schedulers, Subjects) dhe operatorë për të punuar me ngjarje si me koleksione (map, filter, reduce, every dhe të ngjashme nga JavaScript Array).

Le të shqyrtojmë konceptet themelore të kësaj biblioteke.

Observable, Observer, Producer

Observable — tipi i parë bazik që do të shqyrtojmë. Ky klas përmban shumicën e implementimit të RxJs. Ai është i lidhur me një rrjedhë të vëzhguar, në të cilën mund të abonohemi duke përdorur metodën subscribe.

Në Observable realizohet një mekanizëm ndihmës për krijimin e azhurnimeve, të ashtuquajturin Observer. Burimi i vlerave për Observer quhet Producer. Kjo mund të jetë një array, një iterator, një web socket, një ndodhi etj. Pra, mund të themi se observable është një ndërmjetës midis Producer dhe Observer.

Observable trajton tre lloje të ngjarjeve të Observer:

• next – të dhëna të reja
• error – një gabim, nëse sekuenca përfundoi për shkak të një situate të jashtme. Ky ngjarje gjithashtu supozon përfundimin e sekuencës.
• complete — një sinjal për përfundimin e sekuencës. Kjo do të thotë se nuk do të ketë më të dhëna të reja.

Le të shohim një demo:

Në fillim do të trajtojmë vlerat 1, 2, 3, dhe pas 1 sekonde, do të marrim 4 dhe do të përfundojmë rrjedhën tonë.

Mendime në zë

Dhe këtu e kuptova, që të flasësh ishte më interesante se sa të shkruash për këtë. 😀

Subscription

Kur abonohesh në një rrjedhë, krijojmë një klasë të re subscription, e cila na jep mundësinë për të anuluar abonimin duke përdorur metodën unsubscribe. Po ashtu, mund të grumbullojmë abonimet duke përdorur metodën add. Dhe logjikisht, mund të ndajmë rrjedhat duke përdorur remove. Metodat add dhe remove pranojnë një abonim tjetër si hyrje. Dëshiroj të theksoj se kur bëjmë anullimin, ne anulojmë të gjitha abonimet fëmijë siç do të kishim thirrur metodën unsubscribe për to. Le të vazhdojmë.

Llojet e rrjedhave

Nëse duhet të bëj një analogji, do ta paraqisja rrjedhën e ngrohtë si një film në kinematë. Në cilin moment ke ardhur, që nga ai moment e ke filluar shikimin. Rrjedha e ftohtë do ta krahasoja me një telefonatë në mbështetje teknike. Çdo person që telefonon dëgjon regjistrimin e automatikëve nga fillimi në fund, por ti mund të heqësh telefonin duke përdorur unsubscribe.

Do të doja të theksoja se ekzistojnë edhe ato që quhen rrjedha të ngrohta (kjo përkufizim e kam takuar shumë rrallë dhe vetëm në komunitetet e huaja) — kjo është një rrjedhë që transformohet nga një rrjedhë e ftohtë në një të ngrohtë. Lind pyetja — ku të përdorim? )) Do të jap një shembull nga praktika.

Unë punoj me Angular. Ai aktivisht përdor RxJS. Për të marrë të dhënat në server, unë pres një rrjedhë të ftohtë dhe e përdor këtë rrjedhë në shabllon me ndihmën e asyncPipe. Nëse e përdor këtë pipe disa herë, duke u rikthyer te përkufizimi i rrjedhës së ftohtë, çdo pipe do të kërkojë të dhëna nga serveri, që është paksa e çuditshme. Nëse e transformoj rrjedhën e ftohtë në të ngrohtë, atëherë kërkesa do të ndodhi një herë.

Në fakt, kuptimi i llojeve të rrjedhave është mjaft i komplikuar për fillestarët, por është i rëndësishëm.

Operators

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

Ofruesit e operatorëve zgjeruan mundësinë e punës me rrjedhat. Ata ndihmojnë në kontrollimin e ngjarjeve që ndodhin në Observable. Ne do të shqyrtojmë disa nga më të njohurit, ndërsa për më shumë informacion mbi operatorët mund të konsultoheni me lidhjet në informacionin e dobishëm.

Operators — of

Të fillojmë me operatorin ndihmës ‘of’. Ai krijon një Observable mbi një vlerë të thjeshtë.

Operators — filter

Operatori i filtrimit ‘filter’, siç mund ta kuptoni nga emri, filtroh sinjalin e rrjedhës. Nëse operatori kthen të vërtetën, atëherë e kalon më tej.

Operators — take

‘take’ — Merr vlerën e numrit të emitimeve, pas të cilit përfundon rrjedhën.

Operators — debounceTime

‘debounceTime’ — hedh vlerat e emituara që bien brenda një intervali të caktuar kohor midis daljeve — pas kalimit të intervalit të caktuar emiton vlerën e fundit.

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Emiton vlerën çdo 1000ms
  setInterval(() => {
    observer.next(i++)
  }, 1000);

  // Emiton vlerën çdo 1500ms
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Pritni 700ms për vlerat para se t’i përpunoni
  take(3)
);  

Operators — takeWhile

Emiton vlera derisa ‘takeWhile’ të mos kthejë false, pas së cilës do të anullohet nga rrjedha.

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Emit value every 1000ms
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile(producer => producer < 5)
);  

Operators — combineLatest

Operatori kombinuese combineLatest është disi si promise.all. Ai bashkon disa rrjedha në një të vetme. Pas kësaj, kur çdo rrjedhë të emitojë të paktën një herë, marrim vlerat më të fundit nga secila si një array. Më pas, pas çdo emitoj të ndonjë prej rrjedhave të bashkuara, ai do të kthejë vlera të reja.

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 1000ms
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 750ms
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

Operators — zip

Zip pret një vlerë nga çdo rrjedhë dhe formon një array mbi këto vlera. Nëse nuk merr një vlerë nga ndonjë rrjedhë, grupi nuk do të formohet.

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 1000ms
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 750ms
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 500ms
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

Operators — forkJoin

forkJoin gjithashtu bashkon rrjedhat, por emiton një vlerë vetëm kur të gjitha rrjedhat të kenë përfunduar (complete).

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 1000ms
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Emit value every 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

Operators — map

Operatori transformues map ndryshon vlerën e emisionit në një të re.

const { Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Emit value every 1000ms
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

Operators – share, tap

Operatori tap lejon të krijojë efekte anësore, që do të thotë ndonjë veprim që nuk ndikon në rendin e sekuencës.

Operatori utilitar share është në gjendje të bëjë një rrjedhë të ftohtë të nxehtë.

Kemi përfunduar me operatorët. Tani do të kalojmë te Subject.

Mendime në zë

Dhe këtu shkova të pi çaj. Më lodhën këto shembuj 😀

Familja e subject-ëve

Familja e subject-ëve është një shembull e qartë e rrjedhave të nxehta. Këto klasa janë një hibrid, që veprojnë si observable dhe observer njëkohësisht. Duke qenë se subject është një rrjedhë e nxehtë, është e nevojshme të hiqet dorë nga të. Në lidhje me metodat kryesore, këto janë:

• next – transmetimi i të dhënave të reja në rrjedhë
• error – gabim dhe përfundimi i rrjedhës
• complete – përfundimi i rrjedhës
• subscribe – regjistrohu në rrjedhë
• unsubscribe – hiq dorë nga rrjedha
• asObservable – transformohet në një vëzhgues
• toPromise – transformon në një premtim

Dallohen 4-5 lloje subject-ësh.

Mendime në zë

Në stream thashë 4, por duket se ata kanë shtuar një tjetër. Siç thonë, jetoni dhe mësoni.

Subject e thjeshtë new Subject()– lloji më i thjeshtë i subject-ëve. Krijohet pa parameter. Transmeton vlerat që kanë ardhur vetëm pas regjistrimit.

BehaviorSubject new BehaviorSubject(defaultData) – sipas mendimit tim, lloji më i zakonshëm i subject-ëve. Merr një vlerë të paracaktuar. Ruajti gjithmonë të dhënat e emitit të fundit, të cilat i transmeton gjatë regjistrimit. Kjo klasë gjithashtu ka një metodë të dobishme value, e cila kthen vlerën aktuale të rrjedhës.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) — Mund të pranojë opcionalisht si argument të parë madhësinë e buffers që do të mbajë, dhe si të dytë kohën gjatë së cilës na duhet ndryshimi.

AsyncSubject new AsyncSubject() — gjatë regjistrimit nuk ndodh asgjë, dhe vlera do të kthehet vetëm kur të përfundojë. Do të kthehet vetëm vlera e fundit e rrjedhës.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig | Observable, destination?: Observer) — Dokumentacioni për të hesht dhe unë e shoh për herë të parë. Kush di se çfarë bën, na shkruani për ta plotësuar.

Uff. Kështu ne kemi shqyrtuar gjithçka që doja të flisja sot. Shpresoj që kjo informacion të ishte e dobishme. Mund ta shqyrtoni listën e literaturës në seksionin e informacionit të dobishëm.

Informacion i dobishëm

• https://vk.com/frontend_practice?w=wall-182297870_931 — linku për stream
• https://habr.com/ru/company/ruvds/blog/337042/ — Si funksionon JS: një përmbledhje e motorit, mekanizmave të ekzekutimit, dhe stack të thirrjeve.
• https://habr.com/ru/company/ruvds/blog/340508 — Si si punon JS: cikli i ngjarjeve, asinkronia dhe pesë mënyra për të përmirësuar kodin me async / await
• http://vanilla-js.blogspot.com/2014/09/event-loop-javasript.html — Si punon Event Loop në JavaScript
• https://tproger.ru/translations/asynchronous-javascript/ — Evolucioni i JavaScript asinkron
• https://habr.com/ru/company/ruvds/blog/341880/ — Çfarë është RxJS dhe pse është e dobishme ta dish
• https://medium.com/ngx/practical-use-rxjs-81aaab57045c — Përdorimi praktik i RxJS
• https://coursetro.com/posts/code/148/RxJS-Observables-Tutorial—Creating-&-Subscribing-to-Observables — Tutoriali i RxJS Observables — Krijimi & Abonimi në Observables
• https://slides.com/zenabsaleem/rxjs-hot-cold-observables#/ — RXJS: Observables të Ngrohta dhe të Ftohta
• https://clck.ru/FiPgB — Klasa, funksione për krijimin e Observable. Operatorët.
• https://www.learnrxjs.io/operators/ — Operatorët e RxJS me shembuj
• https://rxjs.dev/api — Lista e API-ve
• https://clck.ru/FkS8Y — Llojet e Subject dhe Planifikimi në RxJS

Burimi: habr.com