Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Nyob zoo sawv daws. Nyob rau hauv kov Omelnitsky Sergey. Tsis ntev tas los no, kuv tau tuav cov kwj ntawm cov programming reactive, qhov twg kuv tham txog asynchrony hauv JavaScript. Hnub no kuv xav sau cov ntaub ntawv no.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Tab sis ua ntej peb pib cov khoom tseem ceeb, peb yuav tsum tau ua ib qho kev taw qhia. Yog li cia peb pib nrog cov ntsiab lus: dab tsi yog pawg thiab kab?

Pob yog ib qho kev sau uas nws cov ntsiab lus tau muab los ntawm "kawg hauv, ua ntej tawm" LIFO hauv paus

Ntse yog ib qho kev sau uas nws cov ntsiab lus tau txais raws li txoj cai ("ua ntej hauv, ua ntej tawm" FIFO

Okay, cia peb mus ntxiv.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

JavaScript yog ib hom lus programming ib leeg. Qhov no txhais tau hais tias nws tsuas muaj ib txoj xov ntawm kev tua thiab ib pawg uas cov haujlwm tau teem caij rau kev tua. Yog li ntawd, JavaScript tsuas tuaj yeem ua haujlwm ib zaug xwb, thaum lwm cov haujlwm yuav tos lawv tig rau pawg kom txog thaum lawv raug hu.

Hu pawg yog cov qauv ntaub ntawv uas, hauv cov ntsiab lus yooj yim, sau cov ntaub ntawv hais txog qhov chaw hauv qhov kev pab cuam uas peb nyob. Yog tias peb dhia mus rau hauv kev ua haujlwm, peb thawb nws nkag mus rau sab saum toj ntawm pawg. Thaum peb rov qab los ntawm kev ua haujlwm, peb pop lub ntsiab lus saum toj kawg nkaus ntawm pawg thiab xaus rau qhov peb hu ua qhov haujlwm no los ntawm. Qhov ntawd yog txhua pawg tuaj yeem ua tau. Thiab tam sim no ib lo lus nug nthuav heev. Yog li cas asynchrony ua haujlwm hauv JavasScript?

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Qhov tseeb, ntxiv rau pawg, browsers muaj cov kab tshwj xeeb rau kev ua haujlwm nrog lub npe hu ua WebAPI. Kev ua haujlwm los ntawm cov kab no yuav raug ua tiav hauv kev txiav txim tsuas yog tom qab pawg raug tshem tawm tag. Tsuas yog tom qab ntawd lawv tau muab tso rau ntawm lub queue mus rau pawg rau kev tua. Yog tias muaj tsawg kawg yog ib qho ntawm cov pawg tam sim no, ces lawv tsis tuaj yeem nkag mus rau hauv pawg. Tsuas yog vim li no, hu ua haujlwm los ntawm lub sijhawm ua haujlwm feem ntau tsis raug raws sijhawm, vim tias qhov haujlwm tsis tuaj yeem tau txais los ntawm cov kab mus rau pawg thaum nws puv.

Cia peb saib cov piv txwv hauv qab no thiab cia peb mus dhau nws ib kauj ruam zuj zus. Wb kuj pom tias muaj dab tsi tshwm sim hauv qhov system.

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

1) Tam sim no tsis muaj dab tsi tshwm sim. Lub browser console huv si, hu pawg yog khoob.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

2) Tom qab ntawd cov lus txib console.log('Hi') ntxiv rau hauv pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

3) Thiab nws tau ua tiav

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

4) Tom qab ntawd console.log('Hi') raug tshem tawm ntawm pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

5) Tam sim no cia peb mus rau qhov setTimeout(function cb1() {… }) hais kom ua. Nws yog ntxiv rau pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

6) Lub setTimeout(function cb1() {… }) hais kom ua. Tus browser tsim lub timer uas yog ib feem ntawm Web API. Nws yuav ua lub countdown.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

7) Lub setTimeout(function cb1() {… }) cov lus txib tau ua tiav nws txoj haujlwm thiab raug tshem tawm ntawm pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

8) console.log('Bye') hais kom ua ntxiv rau pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

9) Cov lus txib console.log('Bye') raug tua.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

10) Cov lus txib console.log('Bye') raug tshem tawm ntawm pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

11) Tom qab tsawg kawg 5000ms tau dhau mus, lub sijhawm ua tiav thiab muab cb1 hu rov qab rau hauv kab rov qab.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

12) Qhov kev tshwm sim voj yuav ua haujlwm cb1 los ntawm callback queue thiab thawb nws mus rau pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

13) Cov haujlwm cb1 raug tua thiab ntxiv console.log('cb1') rau pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

14) Cov lus txib console.log('cb1') raug tua.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

15) Cov lus txib console.log('cb1') raug tshem tawm ntawm pawg hu.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

16) Muaj nuj nqi cb1 raug tshem tawm ntawm pawg hu.

Cia peb saib ib qho piv txwv hauv dynamics:

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Zoo, peb tau saib yuav ua li cas asynchrony yog siv hauv JavaScript. Tam sim no cia peb tham luv luv txog kev hloov pauv ntawm asynchronous code.

Lub evolution ntawm 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);
                    })
                })
            })
        })
    })
});

Asynchronous programming raws li peb paub nws hauv JavaScript tsuas yog ua tau nrog cov haujlwm. Lawv tuaj yeem kis tau zoo li lwm yam hloov pauv mus rau lwm yam haujlwm. Qhov no yog li cas callbacks tau yug los. Thiab nws txias, lom zem thiab fervent, mus txog rau thaum nws hloov mus rau hauv kev tu siab, melancholy thiab tu siab. Vim li cas? Yog, nws yooj yim:

  • Raws li qhov nyuaj ntawm txoj cai loj hlob, qhov phiaj xwm sai sai hloov mus rau ntau qhov tsis pom tseeb hauv cov blocks - "callback hell".
  • Kev ua yuam kev tuaj yeem pom tau yooj yim.
  • Koj tsis tuaj yeem rov qab cov lus hais nrog rov qab.

Nrog rau qhov tshwm sim ntawm Kev Cog Lus, qhov xwm txheej tau zoo dua me ntsis.

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

  • Kev cog lus chains tau tshwm sim, uas txhim kho kev nyeem tau ntawm cov cai
  • Muaj ib qho kev sib cais ntawm kev cuam tshuam ntawm kev ua yuam kev
  • Parallel execution nrog Promise.all ntxiv
  • Peb tuaj yeem daws qhov nested asynchrony nrog async / tos

Tab sis kev cog lus muaj nws cov kev txwv. Piv txwv li, kev cog lus, tsis muaj kev seev cev nrog lub tambourine, tsis tuaj yeem raug tshem tawm, thiab qhov tseem ceeb tshaj plaws, nws ua haujlwm nrog ib qho nqi.

Zoo, ntawm no peb ua tau zoo mus rau reactive programming. nkees? Zoo, qhov zoo yog, koj tuaj yeem mus brew qee cov gulls, tawm tswv yim thiab rov qab los nyeem ntxiv. Thiab kuv yuav txuas ntxiv mus.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Reactive programmingβ€Š- lub programming paradigm tsom rau cov ntaub ntawv ntws thiab kev nthuav tawm ntawm kev hloov pauv. Cia peb saib ze dua ntawm cov ntaub ntawv kwj yog dab tsi.

// ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ссылку Π½Π° элСмСнт
const input = ducument.querySelector('input');

const eventsArray = [];

// ΠŸΡƒΡˆΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ событиС Π² массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

Cia peb xav txog tias peb muaj qhov chaw nkag. Peb tsim ib qho array, thiab rau txhua qhov keyup ntawm qhov kev tshwm sim input, peb yuav khaws qhov xwm txheej hauv peb cov array. Nyob rau tib lub sijhawm, kuv xav kom nco ntsoov tias peb cov array raug txheeb raws sijhawm, piv txwv li. qhov Performance index ntawm cov xwm txheej tom qab yog ntau dua qhov Performance index ntawm yav dhau los. Xws li ib qho array yog ib qho yooj yim cov ntaub ntawv ntws qauv, tab sis nws tseem tsis tau txaus. Yuav kom cov array no muaj kev nyab xeeb hu ua kwj, nws yuav tsum muaj peev xwm qhia rau cov neeg siv khoom uas cov ntaub ntawv tshiab tau tuaj txog hauv nws. Yog li peb tuaj rau lub ntsiab lus ntawm ntws.

Cov ntaub ntawv ntws

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

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Ntwsβ€Šyog ib qho array ntawm cov ntaub ntawv txheeb los ntawm lub sijhawm uas tuaj yeem qhia tau tias cov ntaub ntawv tau hloov pauv. Tam sim no xav txog seb nws yooj yim npaum li cas los sau cov lej uas koj yuav tsum tau ua rau ntau qhov xwm txheej hauv qhov sib txawv ntawm cov cai rau ib qho kev nqis tes ua. Peb tsuas yog sau npe rau kwj thiab nws yuav qhia peb thaum muaj kev hloov pauv. Thiab lub tsev qiv ntawv RxJs tuaj yeem ua qhov no.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

RxJS yog lub tsev qiv ntawv rau kev ua hauj lwm nrog asynchronous thiab cov kev tshwm sim-raws li cov kev pab cuam uas siv observable sequences. Lub tsev qiv ntawv muab hom tseem ceeb Saib tau, ntau hom kev pab (Observers, Schedulers, Subjects) thiab cov neeg ua haujlwm rau kev ua haujlwm nrog cov xwm txheej xws li cov khoom sau (daim ntawv qhia, lim, txo, txhua thiab zoo ib yam los ntawm JavaScript Array).

Cia peb nkag siab cov ntsiab lus tseem ceeb ntawm lub tsev qiv ntawv no.

Observable, Observer, Tsim

Observable yog thawj lub hauv paus hom peb yuav saib. Cov chav kawm no muaj qhov tseem ceeb ntawm kev siv RxJs. Nws yog txuam nrog ib qho kev soj ntsuam kwj, uas tuaj yeem sau npe siv txoj kev sau npe.

Observable siv ib qho kev pabcuam rau kev tsim kho tshiab, lub npe hu ua Soj Ntsuam. Lub hauv paus ntawm qhov muaj nuj nqis rau Tus Saib Xyuas yog hu ua tsim kom muaj. Nws tuaj yeem yog array, ib qho iterator, lub qhov (socket) web, qee yam kev tshwm sim, thiab lwm yam. Yog li peb tuaj yeem hais tias observable yog tus neeg xyuas pib ntawm Tus Tsim Khoom thiab Observer.

Observable tuav peb hom Observer txheej xwm:

  • tom ntej - cov ntaub ntawv tshiab
  • yuam kev - ib qho kev ua yuam kev yog hais tias cov kab ke raug kaw vim muaj kev zam. qhov xwm txheej no kuj txhais tau tias qhov kawg ntawm qhov sib lawv liag.
  • ua kom tiav - lub teeb liab hais txog qhov kawg ntawm qhov sib lawv liag. Qhov no txhais tau tias yuav tsis muaj cov ntaub ntawv tshiab ntxiv lawm

Cia peb saib ib qho demo:

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Thaum pib peb yuav ua cov nqi 1, 2, 3, thiab tom qab 1 sec. peb tau txais 4 thiab xaus peb cov xov.

Xav hais nrov nrov

Thiab tom qab ntawd kuv pom tau tias nws nthuav qhia ntau dua li sau txog nws. πŸ˜€

subscription

Thaum peb sau npe rau ib qho kwj, peb tsim chav kawm tshiab subscription, uas muab rau peb xaiv unsubscribe nrog txoj kev unsubscribe. Peb kuj tuaj yeem pab pawg ua npe siv cov txheej txheem ntxiv. Zoo, nws yog qhov laj thawj uas peb tuaj yeem ungroup threads siv tshem tawm. Qhov ntxiv thiab tshem tawm txoj kev lees txais qhov sib txawv subscription raws li cov tswv yim. Kuv xav kom nco ntsoov tias thaum peb unsubscribe, peb unsubscribe los ntawm tag nrho cov me nyuam subscriptions raws li lawv kuj hu ua unsubscribe method. Ua ntej.

Hom dej ntws

KUB
TXIAS

Tus tsim tawm yog tsim tawm sab nraum observable
Tus tsim tawm yog tsim nyob rau hauv observable

Cov ntaub ntawv tau dhau los ntawm lub sijhawm pom tau tsim
Cov ntaub ntawv yog muab thaum lub sijhawm ua ntawv thov.

Xav tau ntau logic rau unsubscribe
Xov terminates ntawm nws tus kheej

Siv kev sib raug zoo ib-rau-ntau
Siv kev sib raug zoo ib leeg

Tag nrho cov subscription muaj nqi tib yam
Subscriptions yog ywj siab

Cov ntaub ntawv tuaj yeem ploj yog tias tsis muaj npe
Reissues tag nrho cov nqi kwj rau ib tug tshiab subscription

Txhawm rau muab qhov piv txwv, kuv xav xav txog qhov dej kub zoo li cov yeeb yaj kiab hauv xinesmas. Lub sijhawm twg koj tuaj, txij lub sijhawm ntawd koj pib saib. Kuv yuav piv cov kwj dej txias nrog kev hu hauv cov ntawd. kev txhawb nqa. Txhua tus neeg hu xov tooj mloog lub tshuab teb cov lus kaw txij thaum pib mus rau qhov kawg, tab sis koj tuaj yeem kaw nrog unsubscribe.

Kuv xav kom nco ntsoov tias tseem muaj cov kwj dej sov (Kuv tau ntsib cov ntsiab lus zoo li no tsis tshua muaj thiab tsuas yog nyob hauv cov zej zog txawv teb chaws) - qhov no yog cov kwj uas hloov los ntawm cov dej txias mus rau qhov kub. Cov lus nug tshwm sim - qhov twg siv)) Kuv yuav muab piv txwv los ntawm kev xyaum.

Kuv tabtom ua haujlwm nrog Angular. Nws nquag siv rxjs. Txhawm rau kom tau txais cov ntaub ntawv mus rau lub server, kuv xav tias yuav muaj dej txias thiab kuv siv cov kwj dej no hauv cov qauv siv asyncPipe. Yog tias kuv siv cov yeeb nkab no ob peb zaug, tom qab ntawd, rov qab mus rau lub ntsiab lus ntawm cov kwj dej txias, txhua cov yeeb nkab yuav thov cov ntaub ntawv los ntawm cov neeg rau zaub mov, uas yog qhov txawv ntawm qhov tsawg tshaj plaws. Thiab yog tias kuv hloov lub kwj txias mus rau qhov sov sov, ces qhov kev thov yuav tshwm sim ib zaug.

Feem ntau, kev nkag siab txog hom ntws yog qhov nyuaj heev rau cov pib tshiab, tab sis tseem ceeb.

tswv

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

Cov neeg ua haujlwm muab sijhawm rau peb ua haujlwm nrog cov kwj deg. Lawv pab tswj cov xwm txheej ntws hauv Observable. Peb yuav xav txog ob peb qhov nrov tshaj plaws, thiab cov ntaub ntawv ntau ntxiv txog cov neeg ua haujlwm tuaj yeem pom ntawm cov kev sib txuas hauv cov ntaub ntawv tseem ceeb.

Cov neeg ua haujlwm-ntawm

Cia peb pib nrog tus pab neeg ua haujlwm ntawm. Nws tsim ib qho Observable raws li tus nqi yooj yim.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Cov neeg ua haujlwm-filter

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Tus neeg teb xov tooj lim, raws li lub npe qhia, lim cov kwj teeb liab. Yog tias tus neeg teb xov tooj rov qab muaj tseeb, ces nws hla mus ntxiv.

Cov neeg ua haujlwm - nqa

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

coj - Siv tus nqi ntawm tus naj npawb ntawm emits, tom qab uas cov kwj xaus.

Operators-debounceTime

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

debounceTime - pov tseg emitted qhov tseem ceeb uas poob nyob rau hauv lub sij hawm luv luv ntawm cov ntaub ntawv tso tawm - tom qab lub sij hawm ncua dhau mus, emits tus nqi kawg.

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Cov neeg ua haujlwm-ua sijhawm

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Emits qhov tseem ceeb kom txog thaum takeWhile rov qab tsis tseeb, ces unsubscribes los ntawm cov kwj.

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Operators-combineLatest

Cov neeg ua haujlwm sib xyaw ua ke ua keLatest yog me ntsis zoo ib yam li cog lus.all. Nws muab ntau cov kwj deg rau hauv ib qho. Tom qab txhua txoj xov tau ua tsawg kawg ib emit, peb tau txais qhov tseeb qhov tseem ceeb ntawm txhua qhov raws li ib qho array. Tsis tas li ntawd, tom qab ib qho emit los ntawm cov kwj ua ke, nws yuav muab cov txiaj ntsig tshiab.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Operator-zip

Zip - tos tus nqi los ntawm txhua tus kwj dej thiab tsim ib qho array raws li cov txiaj ntsig no. Yog tias tus nqi tsis tuaj ntawm ib qho xov, ces pawg yuav tsis raug tsim.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Operator - forkJoin

forkJoin kuj koom nrog cov xov, tab sis nws tsuas yog emits tus nqi thaum tag nrho cov xov tiav.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Operator-map

Daim ntawv qhia kev hloov pauv hloov pauv tus nqi emit rau hauv ib qho tshiab.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

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

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Cov neeg khiav dej num - qhia, coj mus rhaub

Tus neeg teb xov tooj kais tso cai rau koj ua cov kev mob tshwm sim, uas yog, txhua yam kev ua uas tsis cuam tshuam rau cov kab ke.

Tus neeg siv khoom siv sib faib tuaj yeem hloov qhov dej txias rau hauv qhov kub.

Asynchronous programming hauv JavaScript (Callback, Promise, RxJs)

Cov neeg ua haujlwm tau ua tiav. Wb mus rau qhov chaw.

Xav hais nrov nrov

Thiab ces kuv mus haus tshuaj yej. Kuv nkees ntawm cov piv txwv no πŸ˜€

Tsev neeg

Tsev neeg kawm yog ib qho piv txwv tseem ceeb ntawm cov xov kub. Cov chav kawm no yog ib hom hybrid uas ua raws li kev soj ntsuam thiab soj ntsuam tib lub sijhawm. Txij li cov ntsiab lus yog cov dej kub, nws yuav tsum tau unsubscribed los ntawm. Yog tias peb tham txog cov txheej txheem tseem ceeb, cov no yog:

  • tom ntej - hla cov ntaub ntawv tshiab mus rau kwj
  • yuam kev - yuam kev thiab xov termination
  • tiav - kawg ntawm xov
  • pab subscribe - subscribe rau kv
  • unsubscribe - unsubscribe from the kwj
  • asObservable - hloov mus ua tus neeg soj ntsuam
  • toPromise - hloov mus rau hauv kev cog lus

Muab 4 hom kev kawm.

Xav hais nrov nrov

Kuv hais 4 ntawm tus kwj deg, tab sis nws muab tawm lawv ntxiv ib qho ntxiv. Raws li cov lus hais mus, nyob thiab kawm.

Yam Yooj Yim new Subject()- hom kev kawm yooj yim tshaj plaws. Tsim tsis muaj kev txwv. Hla cov txiaj ntsig uas tuaj tom qab kev tso npe.

BehaviorSubject new BehaviorSubject( defaultData<T> ) - hauv kuv lub tswv yim feem ntau hom kev kawm-s. Cov tswv yim siv tus nqi qub. Ib txwm khaws cov ntaub ntawv ntawm qhov teeb meem kawg, uas yog kis tau thaum sau npe. Cov chav kawm no kuj muaj ib txoj kev muaj txiaj ntsig zoo uas rov qab tus nqi tam sim no ntawm cov kwj deg.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - Optionally, nws tuaj yeem ua raws li thawj qhov kev sib cav qhov loj ntawm qhov tsis muaj qhov tseem ceeb uas nws yuav khaws cia hauv nws tus kheej, thiab lub sijhawm thib ob thaum peb xav tau kev hloov pauv.

asyncsubject new AsyncSubject() - Tsis muaj dab tsi tshwm sim thaum sau npe, thiab tus nqi yuav rov qab tsuas yog thaum ua tiav. Tsuas yog tus nqi kawg ntawm tus kwj yuav rov qab los.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Cov ntaub ntawv yog ntsiag to txog nws thiab kuv tus kheej pom nws thawj zaug. Leej twg paub nws ua dab tsi, sau, peb yuav ntxiv.

Phew. Zoo, peb tau txiav txim siab txhua yam uas kuv xav qhia hnub no. Vam tias cov ntaub ntawv no yuav pab tau. Koj tuaj yeem nyeem cov npe ntawm cov ntaub ntawv ntawm koj tus kheej hauv Cov Lus Qhia Tseem Ceeb.

yuav pab tau ntaub ntawv

Tau qhov twg los: www.hab.com

Ntxiv ib saib