Салом ба ҳама. Сергей Омельницкий дар тамос аст. Чанде пеш ман як ҷараёнро оид ба барномасозии реактивӣ баргузор кардам, ки дар он дар бораи асинхронӣ дар JavaScript сӯҳбат кардам. Имрӯз ман мехоҳам дар бораи ин мавод қайд кунам.
Аммо пеш аз он ки мо ба маводи асосӣ оғоз кунем, мо бояд қайди муқаддимавӣ кунем. Пас биёед аз таърифҳо оғоз кунем: стек ва навбат чист?
Стейк маҷмӯаест, ки унсурҳои он дар асоси охирин LIFO ба даст оварда мешаванд
Қарор маҷмӯаест, ки унсурҳои он дар асоси FIFO аввал дар аввал ба даст оварда мешаванд
Хуб, биёед идома диҳем.
JavaScript як забони барномасозии як ришта аст. Ин маънои онро дорад, ки танҳо як риштаи иҷро ва як стек мавҷуд аст, ки дар он функсияҳо барои иҷро навбат гузошта шудаанд. Аз ин рӯ, JavaScript метавонад дар як вақт танҳо як амалро иҷро кунад, дар ҳоле ки амалиётҳои дигар то даъват шудани онҳо навбати худро дар стек интизор мешаванд.
Стеки занг сохтори додаҳост, ки ба таври оддӣ гӯем, маълумотро дар бораи макони барнома дар он ҷое, ки мо ҳастем, сабт мекунад. Агар мо ба функсия гузарем, мо вуруди онро ба болои стек тела медиҳем. Вақте ки мо аз функсия бармегардем, мо элементи болотаринро аз стек мебарорем ва ба он ҷое, ки функсияро даъват карда будем, бармегардем. Ин ҳама чизест, ки стек карда метавонад. Ва ҳоло як саволи бениҳоят ҷолиб. Пас асинхронӣ дар JavasScript чӣ гуна кор мекунад?
Дарвоқеъ, ба ғайр аз стек, браузерҳо як навбати махсус барои кор бо WebAPI ном доранд. Функсияҳои ин навбат танҳо пас аз пурра тоза кардани стек ба тартиб иҷро мешаванд. Танҳо пас аз ин онҳо аз навбат ба стек барои иҷро тела дода мешаванд. Агар дар айни замон ҳадди аққал як элемент дар стек мавҷуд бошад, пас онҳоро ба стек илова кардан мумкин нест. Маҳз аз ҳамин сабаб аст, ки занги функсияҳо аз рӯи вақт-аут аксар вақт дақиқ нест, зеро функсия ҳангоми пур будани он аз навбат ба стек омада наметавонад.
Биёед мисоли зеринро бубинем ва ба иҷрои қадам ба қадам оғоз кунем. Биёед инчунин бубинем, ки дар система чӣ рӯй медиҳад.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Ҳоло ҳеҷ чиз рӯй намедиҳад. Консоли браузер равшан аст, стеки занг холӣ аст.
2) Сипас фармони console.log('Hi') ба стеки зангҳо илова карда мешавад.
3) Ва он иҷро мешавад
4) Сипас console.log('Hi') аз стеки зангҳо хориҷ карда мешавад.
5) Акнун ба фармони setTimeout (функсияи cb1() {… }) гузаред. Он ба стеки зангҳо илова карда мешавад.
6) Фармони setTimeout(функсияи cb1() {… }) иҷро мешавад. Браузер таймереро месозад, ки қисми Web API мебошад. Он ҳисобкуниро иҷро мекунад.
7) Фармони setTimeout(function cb1() {... }) кори худро анҷом дод ва аз стеки зангҳо хориҷ карда шуд.
8) Фармони console.log('Bye') ба стеки зангҳо илова карда мешавад.
9) Фармони console.log('Bye') иҷро мешавад.
10) Фармони console.log('Bye') аз стеки зангҳо хориҷ карда мешавад.
11) Пас аз гузаштани ҳадди аққал 5000 мс, таймер қатъ мешавад ва cb1-ро дар навбати занги бозпас ҷойгир мекунад.
12) Давраи рӯйдодҳо функсияи cb1-ро аз навбати бозхонд гирифта, дар стеки зангҳо ҷойгир мекунад.
13) Функсияи cb1 иҷро мешавад ва console.log('cb1') -ро ба стеки занг илова мекунад.
14) Фармони console.log('cb1') иҷро мешавад.
15) Фармони console.log('cb1') аз стеки зангҳо хориҷ карда мешавад.
16) Функсияи cb1 аз стеки зангҳо хориҷ карда мешавад.
Биёед як мисолро дар динамика дида бароем:
Хуб, мо дида баромадем, ки асинхронӣ дар JavaScript чӣ гуна амалӣ карда мешавад. Акнун биёед мухтасар дар бораи эволютсияи коди асинхронӣ сӯҳбат кунем.
Эволютсияи коди асинхронӣ.
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);
})
})
})
})
})
});Барномасозии асинхронӣ, ки мо онро дар JavaScript медонем, танҳо аз рӯи функсияҳо амалӣ кардан мумкин аст. Онҳо метавонанд мисли ҳар як тағирёбанда ба дигар функсияҳо интиқол дода шаванд. Ҳамин тавр зангҳои бозгашт ба вуҷуд омадаанд. Ва он сард, шавқовар ва бозича аст, то он даме, ки ба ғамгинӣ, ғамгинӣ ва ғамгинӣ табдил ёбад. Чаро? Ин оддӣ аст:
- Бо зиёд шудани мураккабии код, лоиҳа зуд ба блокҳои норавшан ва такроран лона табдил меёбад - "ҷаҳаннам бозхонд".
- Муносибати хато метавонад ба осонӣ аз даст дода шавад.
- Шумо наметавонед ифодаҳоро бо бозгашт баргардонед.
Бо пайдоиши ваъда вазъият каме беҳтар шуд.
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);
});- Занҷирҳои ваъдашуда пайдо шуданд, ки хониши кодро беҳтар карданд
- Усули алоҳида барои дарёфти хатоҳо пайдо шуд
- Имконияти иҷрои мувозӣ бо Promise.all илова карда шуд
- Мо метавонем асинхронии лонаро бо истифода аз async/await ҳал кунем
Аммо ваъдаҳо маҳдудиятҳои худро доранд. Масалан, ваъдаро бе рақс бо танбур бекор кардан мумкин нест ва муҳимтар аз ҳама он аст, ки он бо як арзиш кор мекунад.
Хуб, мо ба барномасозии реактивӣ ба осонӣ наздик шудем. Хаста? Хушбахтона, шумо метавонед рафта чой дам кунед, дар ин бора фикр кунед ва барои хондани бештар баргардед. Ва ман идома медиҳам.
Барномасозии реактивӣ як парадигмаи барномасозӣ аст, ки ба ҷараёни додаҳо ва паҳншавии тағирот нигаронида шудааст. Биёед дида бароем, ки ҷараёни маълумот чист.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Биёед тасаввур кунем, ки мо майдони вуруд дорем. Мо массив эҷод мекунем ва барои ҳар як калиди рӯйдодҳои воридотӣ мо ҳодисаро дар массиви худ нигоҳ медорем. Дар баробари ин, мехоҳам қайд намоям, ки массиви мо аз рӯи вақт мураттаб карда шудааст, яъне. шохиси рӯйдодҳои баъдӣ аз шохиси рӯйдодҳои қаблӣ зиёдтар аст. Чунин массив модели соддакардашудаи ҷараёни додаҳост, аммо он ҳанӯз ҷараён нест. Барои он ки ин массиви бехатар ҷараён номида шавад, он бояд қодир бошад, ки ба ягон тариқ ба муштариён хабар диҳад, ки маълумоти нав ба он ворид шудааст. Ҳамин тариқ, мо ба таърифи ҷараён меоем.
Ҷараёни маълумот
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
Ҷараён массиви маълумотест, ки аз рӯи вақт мураттаб шудаанд, ки метавонанд нишон диҳанд, ки маълумот тағир ёфтааст. Акнун тасаввур кунед, ки навиштани код то чӣ андоза қулай аст, ки дар он як амал даъвати якчанд ҳодисаро дар қисмҳои гуногуни код талаб мекунад. Мо танҳо ба ҷараён обуна мешавем ва он вақте ки тағирот рух медиҳад, моро огоҳ мекунад. Ва китобхонаи RxJs ин корро карда метавонад.
RxJS китобхона барои кор бо барномаҳои асинхронӣ ва рӯйдодҳо бо истифода аз пайдарпайии мушоҳидашаванда аст. Китобхона як намуди асосиро пешниҳод мекунад Мушоҳидашаванда, якчанд намуди ёрирасон (Нозир, Барномасозон, Субъектҳо) ва операторҳо барои кор бо рӯйдодҳо мисли коллексияҳо (харита, филтр, кам кардан, ҳар ва монанди инҳо аз JavaScript Array).
Биёед мафҳумҳои асосии ин китобхонаро фаҳмем.
Мушоҳидашаванда, нозир, истеҳсолкунанда
Мушоҳидашаванда аввалин намуди асосӣест, ки мо онро дида мебароем. Ин синф қисми асосии татбиқи RxJs-ро дар бар мегирад. Он бо ҷараёни мушоҳидашаванда алоқаманд аст, ки метавонад бо истифода аз усули обуна обуна шавад.
Observable механизми ёрирасонро барои эҷоди навсозиҳо, ба истилоҳ амалӣ мекунад Нозир. Манбаи арзишҳо барои Observer номида мешавад тавлидкунанда. Ин метавонад массив, итератор, васлаки веб, як навъ ҳодиса ва ғайра бошад. Ҳамин тавр, мо гуфта метавонем, ки мушоҳидашаванда барандаи байни Истеҳсолкунанда ва Нозир аст.
Мушоҳидашаванда се намуди рӯйдодҳои Нозирро идора мекунад:
- оянда - маълумоти нав
- хато - хатогӣ, агар пайдарпаӣ бо сабаби истисно ба итмом расад. ин ходиса ба анчом расидани навбат низ ишора мекунад.
- пурра — сигнал дар бораи ба охир расидани навбат. Ин маънои онро дорад, ки дигар маълумоти нав нахоҳад буд.
Биёед намоишро бубинем:
Дар аввал мо арзишҳои 1, 2, 3 ва пас аз 1 сонияро коркард мекунем. мо 4 мегирем ва ҷараёни худро ба охир мерасонем.
Бо овози баланд фикр кардан
Ва он гоҳ ман фаҳмидам, ки гуфтани он аз навиштани он ҷолибтар аст. 😀
обуна
Вақте ки мо ба ҷараён обуна мешавем, мо синфи нав эҷод мекунем обунаки ба мо имконият медихад, ки бо истифода аз ин усул обунаро бекор кунем бекор кардан. Мо инчунин метавонем обунаҳоро бо истифода аз усул гурӯҳбандӣ кунем илова кардан. Хуб, мантиқист, ки мо метавонем риштаҳоро бо истифода аз гурӯҳ ҷудо кунем хориҷ. Усулҳои илова ва хориҷ обунаи дигарро ҳамчун вуруд қабул мекунанд. Ман мехоҳам қайд намоям, ки вақте ки мо обунаро қатъ мекунем, мо аз ҳама обунаҳои кӯдакона, гӯё онҳо усули бекоркуниро даъват карда буданд. Ба пеш.
Намудҳои ҷараёнҳо
гарм
КОЛХОЗОБОД
Истеҳсолкунанда берун аз мушоҳидашаванда офарида шудааст
Истеҳсолкунанда дар дохили мушоҳидашаванда сохта шудааст
Маълумот дар вақти эҷоди мушоҳидашаванда интиқол дода мешавад
Маълумот дар вақти обуна пешниҳод карда мешавад
Барои бекор кардани обуна мантиқи иловагӣ лозим аст
Ришта худ аз худ хотима меёбад
Муносибати як ба бисёрро истифода мебарад
Муносибати як ба якро истифода мебарад
Ҳама обунаҳо як маъно доранд
Обунаҳо мустақиланд
Агар шумо обуна надошта бошед, маълумот метавонад гум шавад
Ҳама арзишҳои ҷараёнро барои обунаи нав дубора нашр мекунад
Барои мисол, ман як ҷараёни гармро ҳамчун филм дар театр фикр мекунам. Дар кадом ваќт омадед, аз њамон лањза ба тамошо сар кардед. Ман ҷараёни сардро бо занги техникӣ муқоиса мекардам. дастгирй мекунанд. Ҳар як зангзан сабти паёми овозиро аз аввал то ба охир гӯш мекунад, аммо шумо метавонед телефонро бо истифода аз қатъ кардани обуна гузоред.
Мехоҳам қайд намоям, ки ҷараёнҳои ба истилоҳ гарм низ ҳастанд (ман бо ин таъриф хеле кам ва танҳо дар ҷомеаҳои хориҷӣ дучор омадаам) - ин ҷараёнест, ки аз ҷараёни сард ба гарм табдил меёбад. Саволе ба миён меояд - дар куҷо истифода баред)) Ман аз амалия мисол меорам.
Ман бо Angular кор мекунам. Вай аз rxjs фаъолона истифода мебарад. Барои гирифтани маълумот ба сервер, ман риштаи сардро интизорам ва ин риштаро дар қолаб бо истифода аз asyncPipe истифода баред. Агар ман ин қубурро якчанд маротиба истифода барам, пас ба таърифи ҷараёни сард баргаштан, ҳар як қубур аз сервер маълумот талаб мекунад, ки ҳадди аққал гуфтан аҷиб аст. Ва агар ман як ҷараёни сардро ба оби гарм табдил диҳам, пас дархост як маротиба иҷро мешавад.
Умуман, фаҳмидани намуди ҷараёнҳо барои шурӯъкунандагон хеле душвор аст, аммо муҳим аст.
Операторҳо
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Операторҳо ба мо имкон медиҳанд, ки қобилияти кор бо ҷараёнро васеъ кунем. Онҳо ба назорат кардани рӯйдодҳои дар Мушоҳидашаванда кӯмак мекунанд. Мо якчанд маъмултаринро дида мебароем ва тафсилоти бештарро дар бораи операторҳо бо истифода аз истинодҳо дар маълумоти муфид пайдо кардан мумкин аст.
Операторон - аз
Биёед бо оператори ёрирасон оғоз кунем. Он дар асоси арзиши оддӣ мушоҳидашавандаро эҷод мекунад.
Операторҳо - филтр
Оператори филтр, тавре ки аз ном бармеояд, сигнали ҷараёнро филтр мекунад. Агар оператор ҳақиқӣ баргардонад, он минбаъд мегузарад.
Операторон - мегиранд
гирифтан — Қимати шумораи эмитентҳоро мегирад, ки пас аз он ришта ба охир мерасад.
Операторҳо - debounceTime
debounceTime - арзишҳои баровардашударо, ки дар фосилаи муайяни вақти байни натиҷаҳо ҷойгиранд, мепартоянд - пас аз гузаштани фосилаи вақт, арзиши охиринро мебарорад.
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)
);
Операторҳо - takeWhile
То он даме, ки takeWhile баргардонидани бардурӯғ арзишҳоро мебарорад ва пас аз он обуна аз ришта хориҷ мешавад.
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 )
);
Операторҳо - combineLatest
Оператори combineLatest то андозае ба contract.all шабоҳат дорад. Он якчанд риштаҳоро ба як муттаҳид мекунад. Пас аз он ки ҳар як ришта ҳадди аққал як партовро ба вуҷуд меорад, мо арзишҳои охиринро аз ҳар як дар шакли массив мегирем. Ғайр аз он, пас аз ҳар гуна партов аз ҷараёнҳои муттаҳидшуда, он арзишҳои нав медиҳад.
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));
Операторҳо - zip
Zip - Аз ҳар як ришта арзиш интизор мешавад ва дар асоси ин арзишҳо массив ташкил мекунад. Агар арзиш аз ягон ришта наояд, гурӯҳ ташкил карда намешавад.
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));
Операторҳо - forkJoin
forkJoin инчунин риштаҳоро мепайвандад, аммо он танҳо вақте ки ҳама риштаҳо пурра мешаванд, арзиш мебарорад.
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);
Операторҳо - харита
Оператори табдилдиҳии харита арзиши эмитентро ба арзиши нав табдил медиҳад.
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)
);
Операторҳо - мубодила кунед, клик кунед
Оператори кран ба шумо имкон медиҳад, ки таъсири тараф, яъне ҳама гуна амалҳое, ки ба пайдарпай таъсир намерасонанд, анҷом диҳед.
Оператори коммуналӣ метавонад ҷараёни сардро ба гарм табдил диҳад.
Мо бо операторҳо тамом шудем. Биёед ба Мавзӯъ гузарем.
Бо овози баланд фикр кардан
Ва баъд ман рафтам, ки чой нӯшам. Аз ин мисолхо хаста шудам 😀
Оилаи субъект
Оилаи мавзӯъ намунаи барҷастаи ҷараёнҳои гарм аст. Ин синфҳо як навъ гибрид мебошанд, ки ҳамзамон ҳамчун мушоҳидашаванда ва нозир амал мекунанд. Азбаски мавзӯъ як риштаи гарм аст, аз он хориҷ шудан лозим аст. Агар мо дар бораи усулҳои асосӣ сухан ронем, пас инҳоянд:
- навбатӣ - интиқоли маълумоти нав ба ҷараён
- хато - хато ва қатъи ришта
- пурра — ба итмом расидани ришта
- обуна шудан - ба ҷараён обуна шудан
- қатъ кардан - аз ҷараён хориҷ шудан
- asObservable - табдил ба нозир
- toPromise - ба ваъда табдил меёбад
4 намуди фанҳо вуҷуд доранд.
Бо овози баланд фикр кардан
Дар ҷараёни ҷараён 4 нафар сӯҳбат мекарданд, аммо маълум шуд, ки боз як нафарро илова кардаанд. Чунон ки мегуянд, зиндагй ва ёд гир.
Мавзӯи оддӣ new Subject()– соддатарин намуди фанҳо. Бе параметрҳо сохта шудааст. Қиматҳои танҳо пас аз обуна гирифташударо интиқол медиҳад.
Мавзӯи рафтор new BehaviorSubject( defaultData<T> ) – ба назари ман, маъмултарин навъи мавзӯъ. Вуруд арзиши пешфарзро мегирад. Ҳамеша маълумоти шумораи охиринро, ки ҳангоми обуна интиқол дода мешавад, захира мекунад. Ин синф инчунин усули арзиши муфид дорад, ки арзиши ҷории ҷараёнро бармегардонад.
ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) — Вуруд метавонад ба таври ихтиёрӣ ҳамчун далели аввал андозаи буфери арзишҳоеро, ки дар худ нигоҳ медорад, ва ҳамчун дуюм вақте, ки дар давоми он ба мо тағирот лозим аст, гирад.
AsyncSubject new AsyncSubject() — ҳангоми обуна ҳеҷ чиз рӯй намедиҳад ва арзиш танҳо пас аз анҷоми он баргардонида мешавад. Танҳо арзиши охирини ҷараён баргардонида мешавад.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Ҳуҷҷатҳо дар бораи ӯ хомӯшанд ва ман ӯро бори аввал мебинам. Агар касе донад, ки чӣ кор мекунад, лутфан нависед ва мо илова мекунем.
Фу. Хуб, мо ҳама чизеро, ки имрӯз мехостам ба шумо бигӯям, фаро гирифтем. Ман умедворам, ки ин маълумот муфид буд. Шумо метавонед рӯйхати истинодҳоро худатон дар ҷадвали иттилооти муфид хонед.
маълумоти муфид
Манбаъ: will.com