Fandaharana asynchronous amin'ny JavaScript (Callback, Promise, RxJs)

Salama daholo. Sergey Omelnitsky dia mifandray. Vao tsy ela akory izay dia nampiantrano stream momba ny fandaharana reactive aho, izay niresaka momba ny asynchrony amin'ny JavaScript. Anio aho dia te handray an-tsoratra momba ity fitaovana ity.

Alohan’ny hanombohantsika ny foto-kevitra fototra anefa, dia mila manao fanamarihana fampidiran-dresaka isika. Andeha àry hanomboka amin'ny famaritana: inona ny stack sy ny filaharana?

Stack dia famoriam-bola misy singa azo amin'ny fototra LIFO miditra farany, mivoaka voalohany

Filaharana dia famoriam-bola izay azo amin'ny fototra FIFO miditra voalohany sy mivoaka voalohany

Eny ary, andao hitohy.

JavaScript dia fiteny fandaharana misy kofehy tokana. Midika izany fa tsy misy afa-tsy kofehy famonoana sy stack iray izay milahatra ho an'ny famonoana. Noho izany, JavaScript dia tsy afaka manao afa-tsy hetsika iray isaky ny mandeha, fa ny asa hafa dia miandry ny anjarany amin'ny stack mandra-piantsoana azy.

antso stack dia rafitra angon-drakitra izay, raha tsorina, dia mirakitra fampahalalana momba ny toerana ao amin'ny programa misy antsika. Raha miditra amin'ny asa iray isika, dia manosika ny fidirana ao an-tampon'ny stack. Rehefa miverina avy amin'ny asa iray isika, dia mametaka ny singa ambony indrindra avy amin'ny stack ary miafara any amin'ny toerana niantsoanay ny asa. Izany no hany azon'ny stack atao. Ary ankehitriny fanontaniana tena mahaliana. Ahoana ary no fiasan'ny asynchrony amin'ny JavasScript?

Raha ny marina, ankoatry ny stack, ny navigateur dia manana filaharana manokana hiasa amin'ny antsoina hoe WebAPI. Ny asa ao amin'ity filaharana ity dia hotanterahina araka ny filaharany raha tsy efa voadio tanteraka ny stack. Aorian'izay vao atosiky ny filaharana mankany amin'ny stack izy ireo mba hovonoina. Raha misy singa iray farafahakeliny ao amin'ny stack amin'izao fotoana izao, dia tsy azo ampiana amin'ny stack izy ireo. Izany indrindra no mahatonga ny fiantsoana ny asa amin'ny alàlan'ny fe-potoana dia matetika tsy marina amin'ny fotoana, satria ny fiasa dia tsy afaka miala amin'ny filaharana mankany amin'ny stack raha feno.

Andeha hojerentsika ity ohatra manaraka ity ary hanomboka amin'ny fampiharana azy tsikelikely. Andeha hojerentsika koa izay mitranga ao amin'ny rafitra.

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

1) Tsy misy na inona na inona mitranga. Mazava ny console navigateur, banga ny toby fiantsoana.

2) Avy eo ny baiko console.log('Hi') dia ampidirina amin'ny stack antso.

3) Ary tanteraka izany

4) Avy eo console.log('Hi') dia nesorina tao amin'ny tobin'ny antso.

5) Miroso amin'ny baiko setTimeout(function cb1() {… }). Ampidirina amin'ny stack antso izany.

6) Ny baiko setTimeout(function cb1() {… }) dia tanterahina. Ny navigateur dia mamorona fameram-potoana izay ao anatin'ny Web API. Hanatanteraka fanisana miverina izany.

7) Ny baiko setTimeout(function cb1() {... }) dia nahavita ny asany ary nesorina tao amin'ny stack antso.

8) Ny baiko console.log('Bye') dia ampidirina amin'ny antso an-tariby.

9) Ny baiko console.log('Bye') dia tanterahina.

10) Ny baiko console.log('Bye') dia nesorina tao amin'ny antso an-tariby.

11) Rehefa tapitra ny 5000 ms fara fahakeliny, dia tapitra ny fameram-potoana ary mametraka ny callback cb1 ao amin'ny filaharana antso.

12) Ny famoriam-bola hetsika dia mandray ny cb1 amin'ny filaharana callback ary mametraka izany eo amin'ny stack antso.

13) Ny asa cb1 dia tanterahina ary manampy console.log('cb1') amin'ny stack antso.

14) Ny baiko console.log('cb1') dia tanterahina.

15) Ny baiko console.log('cb1') dia nesorina tao amin'ny antso an-tariby.

16) Ny asa cb1 dia nesorina tamin'ny stack antso.

Andeha hojerentsika ohatra iray amin'ny dinamika:

Eny ary, nijery ny fomba fampiharana ny asynchrony amin'ny JavaScript izahay. Andeha isika hiresaka fohy momba ny fivoaran'ny code asynchronous.

Ny fivoaran'ny code asynchronous.

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

Ny fandaharana asynchronous araka ny fantatsika amin'ny JavaScript dia tsy azo ampiharina afa-tsy amin'ny asa. Izy ireo dia azo ampitaina toy ny variable hafa amin'ny fiasa hafa. Toy izany no nahaterahan'ny callbacks. Ary mangatsiatsiaka, mahafinaritra ary milalao, mandra-pivadika ho alahelo, melancholy ary alahelo. Nahoana? Tsotra izany:

• Rehefa mitombo ny fahasarotan'ny kaody, ny tetikasa dia mivadika haingana amin'ny blocs tsy fantatra, miverimberina miverimberina - "callback hell".
• Mety ho mora adino ny fikarakarana lesoka.
• Tsy afaka mamerina fomba fiteny miaraka amin'ny fiverenana ianao.

Rehefa tonga ny Fampanantenana, dia nihatsara kely ny toe-javatra.

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

• Nipoitra ny rojo fampanantenana, izay nanatsara ny fahaiza-mamaky ny kaody
• Nipoitra ny fomba misaraka amin'ny fisamborana fahadisoana
• Nampiana ny mety hisian'ny famonoana mifanitsy amin'ny fampiasana Promise.all
• Afaka mamaha ny asynchrony nested isika amin'ny fampiasana async/wait

Misy fetrany anefa ny fampanantenana. Ohatra, ny fampanantenana dia tsy azo foanana raha tsy mandihy amin'ny ampongatapaka, ary ny tena zava-dehibe dia ny miasa miaraka amin'ny sanda tokana.

Eny ary, nizotra tamim-pilaminana ny fandaharana reactive izahay. Reraka? Soa ihany fa afaka mandeha manao dite ianao, eritrereto izany ary miverina mamaky bebe kokoa. Ary mbola hanohy aho.

Fandaharana reactive dia paradigma fandaharana mifantoka amin'ny fikorianan'ny angona sy ny fampielezana fanovana. Andeha hojerentsika akaiky ny atao hoe stream data.

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

const eventsArray = [];

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

Alao sary an-tsaina hoe manana sehatra fampidirana isika. Mamorona array isika ary isaky ny keyup amin'ny hetsika fampidirana dia hitahiry ny hetsika ao amin'ny array. Amin'izay fotoana izay, tiako ny manamarika fa ny laharan-tsika dia voalahatra araka ny fotoana, i.e. ny fanondroan’ny fisehoan-javatra any aoriana dia lehibe kokoa noho ny fanondroan’ireo teo aloha. Ny array toy izany dia maodely tsotsotra amin'ny fikorianan'ny angona, saingy mbola tsy fikorianana izany. Mba hahatonga an'io array io antsoina soa aman-tsara hoe stream, dia tsy maintsy afaka mampahafantatra amin'ny mpanjifa fa misy angona vaovao tonga ao aminy. Noho izany dia tonga amin'ny famaritana ny fikorianan'ny rivotra isika.

Data stream

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

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

Flow dia angon-drakitra nalahatra araka ny fotoana izay afaka manondro fa niova ny angona. Alaivo sary an-tsaina hoe mety tsara ny manoratra kaody izay mitaky hetsika maromaro amin'ny faritra samihafa amin'ny kaody ny hetsika iray. Misoratra anarana amin'ny stream fotsiny izahay ary hampahafantatra anay izany rehefa misy fiovana. Ary ny tranomboky RxJs dia afaka manao izany.

RxJS dia tranomboky miasa miaraka amin'ny programa asynchronous sy mifototra amin'ny hetsika mampiasa filaharana azo jerena. Ny tranomboky dia manome karazana fototra azo dinihina, karazana fanampiana maromaro (Mpandinika, Mpandrindra, Lohahevitra) ary ireo mpandraharaha miasa amin'ny hetsika toy ny fanangonana (sarintany, sivana, ahena, tsirairay ary mitovy amin'ny JavaScript Array).

Andeha hojerentsika ny foto-kevitra fototra amin'ity tranomboky ity.

Observable, Mpijery, Mpamokatra

Observable no karazana fototra voalohany hojerentsika. Ity kilasy ity dia ahitana ny ampahany lehibe amin'ny fampiharana RxJs. Ampifandraisina amin'ny renirano azo jerena izany, izay azo alaina amin'ny fampiasana ny fomba famandrihana.

Observable dia mampiasa rafitra mpanampy amin'ny famoronana fanavaozana, ilay antsoina hoe Observer. Ny loharanon'ny soatoavina ho an'ny Observer dia antsoina mpamokatra. Mety ho array, iterator, socket web, karazana hetsika, sns. Noho izany dia afaka milaza isika fa ny observable dia mpitarika eo amin'ny Producer sy Observer.

Observable dia mitantana karazana hetsika Observer telo:

• manaraka - angona vaovao
• fahadisoana - fahadisoana raha nifarana ny filaharana noho ny fanavahana. Ity hetsika ity dia midika ihany koa ny fahavitan'ny filaharana.
• feno — famantarana momba ny fahavitan'ny filaharana. Midika izany fa tsy hisy angona vaovao intsony.

Andao hojerentsika ny demo:

Amin'ny voalohany dia handamina ny soatoavina 1, 2, 3, ary aorian'ny 1 segondra. hahazo 4 isika ary hamarana ny renirano.

Mieritreritra mafy

Dia tsapako avy eo fa mahaliana kokoa noho ny manoratra momba izany ny filazana azy. 😀

famandrihana

Rehefa misoratra anarana amin'ny stream isika dia mamorona kilasy vaovao famandrihanaizay manome antsika fahafahana tsy hisoratra anarana mampiasa ny fomba Unsubscribe. Afaka mivondrona koa izahay famandrihana mampiasa ny fomba hametraka. Eny, lojika ny ahafahantsika manasaraka ireo kofehy ampiasaina esory. Ny fomba manampy sy manala dia manaiky famandrihana hafa ho fampidirana. Tiako ny manamarika fa rehefa tsy misoratra anarana izahay dia tsy misoratra anarana amin'ny famandrihana ankizy rehetra toy ny hoe niantso ny fomba tsy misoratra anarana. Ataovy tsy am-pihambahambana.

Karazan-driaka

HOT
Cold

Ny mpamokatra dia noforonina ivelany azo jerena
Ny mpamokatra dia noforonina ao anatiny azo jerena

Ny angon-drakitra dia nafindra tamin'ny fotoana namoronana ny azo jerena
Ny data dia omena amin'ny fotoana famandrihana

Mila lojika fanampiny raha tsy misoratra anarana
Ny kofehy dia mifarana ho azy

Mampiasa fifandraisana tokana amin'ny maro
Mampiasa fifandraisana iray amin'ny iray

Mitovy ny dikan'ny famandrihana rehetra
Tsy miankina ny famandrihana

Mety ho very ny angona raha tsy manana famandrihana ianao
Mamoaka indray ny sandan'ny stream rehetra ho an'ny famandrihana vaovao

Mba hanomezana fanoharana, dia hieritreritra aho fa ny renirano mafana dia toy ny sarimihetsika ao amin'ny teatra. Tamin'ny fotoana inona no nahatongavanao, nanomboka tamin'izay fotoana izay no nanombohanao nijery. Ampitahaiko amin'ny antso amin'ny teknolojia ny fikorianan'ny hatsiaka. fanohanana. Ny mpiantso rehetra dia mihaino ny fandraisam-peo amin'ny feo manomboka amin'ny voalohany ka hatramin'ny farany, saingy azonao atao ny manantona amin'ny alàlan'ny tsy famandrihana.

Tiako ny manamarika fa misy ihany koa ny antsoina hoe fikorianan'ny hafanana (tena mahalana aho no nahita an'io famaritana io ary any amin'ny vondrom-piarahamonina vahiny ihany) - izany dia fikorianan'ny rivotra izay miova avy amin'ny rano mangatsiaka ho mafana. Mipoitra ny fanontaniana - aiza no hampiasana)) Hanome ohatra avy amin'ny fampiharana aho.

Miara-miasa amin'ny Angular aho. Mazoto mampiasa rxjs izy. Mba handraisana data amin'ny mpizara dia manantena kofehy mangatsiaka aho ary ampiasao ity kofehy ity amin'ny môdely mampiasa asyncPipe. Raha mampiasa io sodina io imbetsaka aho, dia miverina amin'ny famaritana ny renirano mangatsiaka, ny fantsona tsirairay dia hangataka angon-drakitra avy amin'ny mpizara, izay hafahafa raha lazaina. Ary raha mamadika rano mangatsiaka ho mafana aho, dia hitranga indray mandeha ny fangatahana.

Amin'ny ankapobeny, sarotra ho an'ireo vao manomboka ny fahatakarana ny karazana fikoriana, fa zava-dehibe.

mpandraharaha

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

Ny mpandraharaha dia manome antsika fahafahana hanitarana ny fahafahantsika miasa amin'ny streams. Manampy amin'ny fanaraha-maso ny zava-mitranga ao amin'ny Observable izy ireo. Hijery roa amin'ireo malaza indrindra izahay, ary afaka mahita bebe kokoa momba ny mpandraharaha ianao amin'ny fanarahana ireo rohy amin'ny fampahalalana mahasoa.

Operators - ny

Andeha isika hanomboka amin'ny mpandraharaha mpanampy ny. Mamorona Observable mifototra amin'ny sanda tsotra.

Opérateurs - sivana

Ny mpandraharaha sivana, araka ny soso-kevitry ny anarana, dia manasivana ny famantarana ny renirano. Raha miverina marina ny mpandraharaha dia mitsambikina lavidavitra kokoa.

Opérateurs - mandray

maka - Maka ny sandan'ny isan'ny mpitatitra, rehefa avy eo ny kofehy mifarana.

Opérateurs - debounceTime

debounceTime - manary ny soatoavina mivoaka izay tafiditra ao anatin'ny elanelan'ny fotoana voafaritra eo anelanelan'ny vokatra - rehefa tapitra ny elanelan'ny fotoana, dia mamoaka ny sanda farany.

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

Operators - takeWhile

Mamoaka soatoavina mandra-piverin'ny takeWhile diso, ary avy eo dia miala amin'ny kofehy.

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

Ny mpandraharaha combineLatest dia mitovitovy amin'ny promise.all. Manambatra kofehy maromaro ho iray. Rehefa avy manao emission iray farafahakeliny ny kofehy tsirairay dia mahazo ny soatoavina farany avy amin'ny tsirairay amin'ny endrika array. Ankoatr'izay, aorian'ny fivoahana avy amin'ireo renirano mitambatra, dia hanome sanda vaovao izany.

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

Opérateurs - zip

Zip - Miandry sanda avy amin'ny kofehy tsirairay ary mamorona lasy mifototra amin'ireo soatoavina ireo. Raha tsy avy amin'ny kofehy ny sandany, dia tsy hisy ny vondrona.

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

Opérateurs - forkJoin

Ny forkJoin dia mikambana amin'ny kofehy ihany koa, saingy mamoaka sanda fotsiny izy rehefa feno ny kofehy rehetra.

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

Opérateurs - sarintany

Ny opérateur de transformation sari-tany dia manova ny sandan'ny emitter ho lasa vaovao.

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

Opérateurs – mizara, tap

Ny mpandraharaha paompy dia mamela anao hanao voka-dratsy, izany hoe ny hetsika rehetra tsy misy fiantraikany amin'ny filaharana.

Afaka mamadika rano mangatsiaka ho lasa mafana ny operateur utility share.

Tapitra izahay tamin'ny mpandraharaha. Andao hiroso amin'ny lohahevitra.

Mieritreritra mafy

Dia nandeha nisotro dite aho avy eo. Leo an'ireo ohatra ireo aho 😀

Fianakaviana lohahevitra

Ny fianakaviana lohahevitra dia ohatra tsara indrindra amin'ny fikorianan'ny hafanana. Ireo kilasy ireo dia karazana hybrid izay miasa miaraka amin'ny maha-maso sy mpanara-maso. Satria lohahevitra mafana ny lohahevitra dia ilaina ny miala amin'izany. Raha miresaka momba ny fomba lehibe isika, dia ireto manaraka ireto:

• manaraka - famindrana angona vaovao amin'ny renirano
• fahadisoana - hadisoana sy famaranana kofehy
• feno - famitana ny kofehy
• misoratra anarana - misoratra anarana amin'ny stream
• tsy misoratra anarana - tsy misoratra anarana amin'ny renirano
• asObservable - miova ho mpandinika
• toPromise - miova ho fampanantenana

Misy karazana taranja 4.

Mieritreritra mafy

Nisy olona 4 niresaka teo amin’ny sakelidrano, saingy hita fa nampiana iray hafa. Araka ny lazain'izy ireo, miaina sy mianara.

Foto-kevitra tsotra new Subject()– karazana taranja tsotra indrindra. Noforonina tsy misy masontsivana. Mandefa sanda voaray aorian'ny famandrihana.

BehaviorSubject new BehaviorSubject( defaultData<T> ) – Raha ny hevitro, ny karazana lohahevitra mahazatra indrindra. Ny fidirana dia maka ny sanda default. Tehirizo foana ny angon-drakitra momba ny laharana farany, izay ampitaina rehefa misoratra anarana. Ity kilasy ity koa dia manana fomba fiasa mahasoa, izay mamerina ny sandan'ny stream ankehitriny.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - Ny fidirana dia azo alaina ho tohan-kevitra voalohany ny haben'ny buffer ny soatoavina hotehirizina ao aminy, ary ny faharoa dia ny fotoana ilantsika fiovana.

AsyncSubject new AsyncSubject() - tsy misy na inona na inona mitranga rehefa misoratra anarana, ary ny sandany dia haverina rehefa feno. Ny sanda farany amin'ny riaka ihany no haverina.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — Mangina momba azy ny antontan-taratasy ary sambany aho no nahita azy. Raha misy mahalala ny ataony dia manorata dia ampianay.

Phew. Eny ary, noresahinay izay rehetra tiako holazaina aminao androany. Manantena aho fa nahasoa ity fampahalalana ity. Azonao atao ny mamaky ny lisitry ny references amin'ny tabilao fampahalalana mahasoa.

fanazavana

• Rohy mankany amin'ny stream
• Ahoana ny fiasan'ny JS: topimaso momba ny motera, mekanika fampandehanana, antso an-tariby
• Ahoana ny fiasan'ny JS: Loop hetsika, asynchrony ary fomba dimy hanatsarana ny kaody misy anao miaraka amin'ny async / miandry
• Ahoana ny fiasan'ny Event Loop amin'ny JavaSript
• Ny fivoaran'ny JavaScript Asynchronous
• Inona ny RxJS ary nahoana no ilaina ny mahafantatra momba izany?
  
• Fampiharana azo ampiharina amin'ny RxJS
• RxJS Observables Tutorial — Mamorona & misoratra anarana amin'ny Observables
• RXJS: Azo jerena mafana sy mangatsiaka
• Kilasy, fiasa amin'ny famoronana Observable. Opérateurs.
• RxJS Operators amin'ny ohatra
• Lisitry ny API
• Karazana lohahevitra sy fandaharam-potoana ao amin'ny RxJS

Source: www.habr.com