JavaScript တွင် Asynchronous ပရိုဂရမ်ရေးသားခြင်း (Callback၊ Promise၊ RxJs)

အားလုံးမင်္ဂလာပါ။ Sergey Omelnitsky က ဆက်သွယ်နေပါတယ်။ မကြာသေးမီက JavaScript တွင် asynchrony အကြောင်းပြောခဲ့သည့် reactive programming နှင့်ပတ်သက်သော stream တစ်ခုကို မကြာသေးမီက ပြုလုပ်ခဲ့သည်။ ဒီနေ့ ဒီအကြောင်းအရာနဲ့ ပတ်သက်ပြီး မှတ်သားထားချင်ပါတယ်။

သို့သော် ကျွန်ုပ်တို့သည် အဓိကအကြောင်းအရာကို မစတင်မီ၊ ကျွန်ုပ်တို့သည် မိတ်ဆက်မှတ်စုတစ်ခု ပြုလုပ်ရန် လိုအပ်ပါသည်။ ဒီတော့ အဓိပ္ပါယ်ဖွင့်ဆိုချက်တွေနဲ့စကြရအောင်- stack နဲ့ a queue ဆိုတာ ဘာလဲ။

ပုံတူ LIFO အခြေခံဖြင့် နောက်ဆုံးဝင်၊ ပထမထွက် အစိတ်အပိုင်းများကို ရယူထားသော စုစည်းမှုတစ်ခုဖြစ်သည်။

လှည့် ဒြပ်စင်များကို ပထမဝင်၊ ပထမထွက် FIFO အခြေခံဖြင့် ရယူထားသော စုစည်းမှုတစ်ခုဖြစ်သည်။

အိုကေ၊ ဆက်ကြရအောင်။

JavaScript သည် single-threaded programming language တစ်ခုဖြစ်သည်။ ဆိုလိုသည်မှာ execution ၏ thread တစ်ခုတည်းနှင့် execution အတွက် တန်းစီထားသည့် functions များပေါ်တွင် stack တစ်ခုသာရှိသည်။ ထို့ကြောင့်၊ JavaScript သည် တစ်ကြိမ်လျှင် လုပ်ဆောင်ချက်တစ်ခုသာ လုပ်ဆောင်နိုင်ပြီး အခြားလုပ်ဆောင်မှုများသည် ၎င်းတို့ကို ခေါ်သည့်အချိန်အထိ stack ပေါ်တွင် ၎င်းတို့၏အဖွင့်ကို စောင့်ရမည်ဖြစ်သည်။

stack ကိုခေါ်ပါ။ ရိုးရှင်းစွာပြောရလျှင် ကျွန်ုပ်တို့ရောက်ရှိနေသည့် ပရိုဂရမ်ရှိနေရာနှင့်ပတ်သက်သည့် အချက်အလက်များကို မှတ်တမ်းတင်သည့် ဒေတာဖွဲ့စည်းပုံဖြစ်သည်။ လုပ်ဆောင်ချက်တစ်ခုသို့ ကျွန်ုပ်တို့ဝင်ရောက်ပါက၊ ၎င်း၏အဝင်ကို stack ၏ထိပ်သို့တွန်းပါ။ လုပ်ဆောင်ချက်တစ်ခုမှ ကျွန်ုပ်တို့ပြန်လာသောအခါ၊ ကျွန်ုပ်တို့သည် stack မှ ထိပ်ဆုံးဒြပ်စင်ကိုဖွင့်ပြီး လုပ်ဆောင်ချက်ဟုခေါ်သည့်နေရာတွင် ပြန်ပြီး အဆုံးသတ်ပါသည်။ ဒါက stack လုပ်နိုင်သမျှပါပဲ။ ယခုလည်း အလွန်စိတ်ဝင်စားစရာကောင်းသော မေးခွန်းတစ်ခုဖြစ်သည်။ ထို့နောက် JavasScript တွင် asynchrony သည် မည်သို့အလုပ်လုပ်သနည်း။

အမှန်မှာ၊ stack များအပြင်၊ ဘရောက်ဆာများသည် WebAPI ဟုခေါ်သော လုပ်ငန်းဆောင်တာများအတွက် အထူးတန်းစီတစ်ခုရှိသည်။ stack ကို လုံးဝရှင်းပြီးမှသာ ဤတန်းစီအတွင်းရှိ လုပ်ဆောင်ချက်များကို အစဉ်လိုက်လုပ်ဆောင်ပါမည်။ ပြီးမှသာ ၎င်းတို့ကို ကွပ်မျက်ရန်အတွက် stack ပေါ်သို့ တန်းစီခြင်းမှ တွန်းပို့ပါသည်။ လောလောဆယ် stack တွင် အနည်းဆုံး အစိတ်အပိုင်းတစ်ခုရှိနေပါက၊ ၎င်းတို့ကို stack သို့ ထည့်၍မရပါ။ အဘယ်ကြောင့်ဆိုသော် အချိန်လွန်ခြင်းဖြင့် ဖုန်းခေါ်ဆိုခြင်းလုပ်ဆောင်ချက်များသည် အချိန်နှင့်တပြေးညီ မတိကျသောကြောင့်၊ လုပ်ဆောင်ချက်သည် ပြည့်နေချိန်တွင် တန်းစီမှ stack သို့ မရောက်ရှိနိုင်သောကြောင့်ဖြစ်သည်။

အောက်ပါ ဥပမာကို ကြည့်ပြီး ၎င်း၏ အဆင့်ဆင့် လုပ်ဆောင်မှုကို စတင်ကြပါစို့။ စနစ်မှာ ဘာတွေဖြစ်မလဲဆိုတာကိုလည်း ကြည့်ကြရအောင်။

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

1) ဘာမှမဖြစ်သေးပါဘူး။ ဘရောက်ဆာ ကွန်ဆိုးရှင်းသည် ရှင်းလင်းသည်၊ ခေါ်ဆိုမှုအစုသည် ဗလာဖြစ်နေသည်။

2) ထို့နောက် command console.log('Hi') ကို call stack တွင် ထည့်ထားသည်။

၃) ပြီးပြည့်စုံတယ်။

4) ထို့နောက် console.log('Hi') ကို call stack မှ ဖယ်ရှားသည်။

5) ယခု command setTimeout(function cb1() {… }) သို့သွားပါ။ ၎င်းကို ခေါ်ဆိုမှုအစုတွင် ထည့်သွင်းထားသည်။

6) setTimeout(function cb1() {… }) command ကို လုပ်ဆောင်သည်။ ဘရောက်ဆာသည် ဝဘ် API ၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သော အချိန်တိုင်းကိရိယာကို ဖန်တီးသည်။ နှစ်သစ်ကြိုဆိုပွဲ ပြုလုပ်မည်ဖြစ်သည်။

7) setTimeout(function cb1() {... }) command သည် ၎င်း၏အလုပ်ပြီးမြောက်ပြီး call stack မှ ဖယ်ရှားလိုက်ပါသည်။

8) command console.log('Bye') ကို call stack တွင် ထည့်ထားသည်။

9) console.log('Bye') အမိန့်ကို လုပ်ဆောင်သည်။

10) command console.log('Bye') ကို call stack မှ ဖယ်ရှားသည်။

11) အနည်းဆုံး 5000 ms ကျော်လွန်ပြီးနောက်၊ timer သည် ရပ်ဆိုင်းပြီး callback cb1 ကို callback တန်းစီတွင် နေရာချပေးသည်။

12) event loop သည် function cb1 ကို callback queue မှယူကာ call stack တွင် ထားပေးသည်။

13) Function cb1 ကို လုပ်ဆောင်ပြီး call stack တွင် console.log('cb1') ကို ပေါင်းထည့်သည်။

14) console.log('cb1') အမိန့်ကို လုပ်ဆောင်သည်။

15) command console.log('cb1') ကို call stack မှ ဖယ်ရှားသည်။

16) Function cb1 ကို call stack မှဖယ်ရှားသည်။

ဒိုင်းနမစ်ဆိုင်ရာ ဥပမာကို ကြည့်ကြပါစို့။

ကောင်းပြီ၊ JavaScript တွင် asynchrony ကို မည်ကဲ့သို့ အကောင်အထည်ဖော်သည်ကို ကျွန်ုပ်တို့ ကြည့်ရှုခဲ့သည်။ အခု 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);
                    })
                })
            })
        })
    })
});

JavaScript တွင် ကျွန်ုပ်တို့သိထားသည့်အတိုင်း Asynchronous programming ကို လုပ်ဆောင်ချက်များဖြင့်သာ အကောင်အထည်ဖော်နိုင်ပါသည်။ ၎င်းတို့ကို အခြားသော ကိန်းရှင်များကဲ့သို့ အခြားလုပ်ဆောင်ချက်များသို့ ပေးပို့နိုင်သည်။ ဤသို့ဖြင့် ပြန်လည်ခေါ်ဆိုမှုများ မွေးဖွားလာခဲ့သည်။ ဝမ်းနည်းမှု၊ လွမ်းဆွေးမှုနှင့် ဝမ်းနည်းမှုအဖြစ်သို့ ပြောင်းလဲသွားသည့်တိုင်အောင် ၎င်းသည် အေးမြ၊ ပျော်စရာကောင်းပြီး ကစားစရာဖြစ်သည်။ အဘယ်ကြောင့်? ရိုးရှင်းပါတယ်-

• ကုဒ်၏ ရှုပ်ထွေးမှုများ တိုးလာသည်နှင့်အမျှ ပရောဂျက်သည် လျင်မြန်စွာ မထင်မရှား၊ ထပ်ခါတလဲလဲ အသိုက်လုပ်ကွက်များအဖြစ်သို့ လျင်မြန်စွာ ပြောင်းလဲသွားသည် - "ငရဲကို ပြန်ခေါ်ခြင်း"။
• ကိုင်တွယ်မှု အမှားသည် အလွယ်တကူ လွဲချော်နိုင်သည်။
• ပြန်လာခြင်းဖြင့် သင်သည် စကားရပ်များကို ပြန်၍မရနိုင်ပါ။

ကတိတွေ ထွန်းကားလာတာနဲ့အမျှ အခြေအနေတွေ နည်းနည်းပိုကောင်းလာတယ်။

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 chains များ ပေါ်လာသည်။
• အမှားများကို ဖမ်းရန် သီးခြားနည်းလမ်းတစ်ခု ပေါ်လာသည်။
• Promise.all ကို အသုံးပြု၍ အပြိုင်လုပ်ဆောင်နိုင်ခြေကို ထည့်သွင်းထားသည်။
• async/ait ကို အသုံးပြု၍ nested asynchrony ကို ဖြေရှင်းနိုင်ပါသည်။

ဒါပေမယ့် ကတိကဝတ်တွေမှာ ကန့်သတ်ချက်တွေရှိတယ်။ ဥပမာအားဖြင့်၊ ပတ်သာဖြင့် ကခြင်းမရှိဘဲ ကတိတစ်ခုအား ဖျက်၍မရပါ၊ အရေးကြီးဆုံးမှာ တန်ဖိုးတစ်ခုနှင့် လုပ်ဆောင်နေခြင်းဖြစ်သည်။

ကောင်းပြီ၊ ကျွန်ုပ်တို့သည် ဓာတ်ပြုမှု ပရိုဂရမ်ကို ချောမွေ့စွာ ချဉ်းကပ်ပြီးပြီ။ ပင်ပန်းနေပြီလား? ကံကောင်းထောက်မစွာ၊ မင်း လက်ဖက်ရည်သောက်၊ အဲဒါကို စဉ်းစားပြီး စာများများဖတ်ဖို့ ပြန်လာနိုင်တယ်။ ပြီးတော့ ငါ ဆက်လုပ်မယ်။

Reactive programming ဒေတာစီးဆင်းမှုနှင့် ပြန့်ပွားမှုပြောင်းလဲခြင်းတို့ကို အာရုံစိုက်သည့် ပရိုဂရမ်ရေးဆွဲခြင်းဆိုင်ရာ ပါရာဒိုင်းတစ်ခုဖြစ်သည်။ ဒေတာစီးကြောင်းဆိုတာ ဘာလဲဆိုတာကို အနီးကပ်လေ့လာကြည့်ရအောင်။

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

const eventsArray = [];

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

ကျွန်ုပ်တို့တွင် ထည့်သွင်းအကွက်တစ်ခုရှိသည်ကို စိတ်ကူးကြည့်ကြပါစို့။ ကျွန်ုပ်တို့သည် array တစ်ခုကို ဖန်တီးနေပြီး input event ၏ keyup တိုင်းအတွက် event ကို ကျွန်ုပ်တို့၏ array တွင် သိမ်းဆည်းပါမည်။ တစ်ချိန်တည်းမှာပင်၊ ကျွန်ုပ်တို့၏ array ကို အချိန်အားဖြင့် စီထားခြင်းဖြစ်သည်၊ ဆိုလိုသည်မှာ၊ နောက်ပိုင်းဖြစ်ရပ်များ၏အညွှန်းကိန်းသည် အစောပိုင်းအညွှန်းကိန်းများထက် ပိုများသည်။ ထိုသို့သော array သည် ဒေတာစီးဆင်းမှု၏ ရိုးရှင်းသောပုံစံတစ်ခုဖြစ်သော်လည်း ၎င်းသည် စီးဆင်းမှုတစ်ခုမဟုတ်သေးပါ။ ဤအခင်းအကျင်းကို စမ်းချောင်းတစ်ခုဟု လုံခြုံစွာခေါ်ဆိုနိုင်ရန်၊ ဒေတာအသစ်ရောက်ရှိလာကြောင်း စာရင်းသွင်းသူများအား တစ်နည်းနည်းဖြင့် အသိပေးနိုင်ရမည်ဖြစ်သည်။ ထို့ကြောင့် ကျွန်ုပ်တို့သည် စီးဆင်းမှု၏ အဓိပ္ပါယ်ကို ရောက်ရှိလာပါသည်။

ဒေတာစီးကြောင်း

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

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

စီးဆင်းမှု ဒေတာသည် ပြောင်းလဲသွားကြောင်း ညွှန်ပြနိုင်သည့် အချိန်အလိုက် စီထားသော ဒေတာ array တစ်ခုဖြစ်သည်။ လုပ်ဆောင်ချက်တစ်ခုသည် ကုဒ်၏ မတူညီသော အစိတ်အပိုင်းများရှိ ဖြစ်ရပ်များစွာကို ခေါ်ဆိုရန် လိုအပ်သည့် ကုဒ်ရေးရန် မည်မျှအဆင်ပြေလာသည်ကို စိတ်ကူးကြည့်ပါ။ ကျွန်ုပ်တို့သည် တိုက်ရိုက်ထုတ်လွှင့်မှုကို စာရင်းသွင်းထားပြီး အပြောင်းအလဲများ ဖြစ်ပေါ်လာသည့်အခါတွင် ကျွန်ုပ်တို့ကို အကြောင်းကြားပါမည်။ RxJs စာကြည့်တိုက်က ဒါကို လုပ်နိုင်ပါတယ်။

RxJS စောင့်ကြည့်နိုင်သော စီတန်းများကို အသုံးပြု၍ အပြိုင်အဆိုင် နှင့် အဖြစ်အပျက်-အခြေခံ ပရိုဂရမ်များနှင့် လုပ်ဆောင်ရန်အတွက် စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ စာကြည့်တိုက်သည် အခြေခံအမျိုးအစားကို ထောက်ပံ့ပေးသည်။ စောင့်ကြည့်လေ့လာနိုင်သည်အရန်အမျိုးအစားများစွာ (လေ့လာသူ၊ စီစဉ်သူများ၊ ဘာသာရပ်များ) နှင့် စုစည်းမှုများကဲ့သို့ ဖြစ်ရပ်များနှင့် အလုပ်လုပ်ရန်အတွက် အော်ပရေတာများ (မြေပုံ၊ စစ်ထုတ်၊ လျှော့ချ၊ တိုင်း နှင့် JavaScript Array မှ အလားတူများ)။

ဤစာကြည့်တိုက်၏ အခြေခံသဘောတရားများကို နားလည်ကြပါစို့။

Observable၊ Observer, ထုတ်လုပ်သူ

Observable သည် ကျွန်ုပ်တို့ ကြည့်ရှုရမည့် ပထမဆုံး အခြေခံ အမျိုးအစား ဖြစ်သည်။ ဤအတန်းတွင် RxJs အကောင်အထည်ဖော်မှု၏ အဓိကအပိုင်းပါရှိသည်။ စာရင်းသွင်းမှုနည်းလမ်းကို အသုံးပြု၍ စာရင်းသွင်းနိုင်သည့် ရှုမြင်နိုင်သော ထုတ်လွှင့်မှုနှင့် ဆက်စပ်နေသည်။

Observable သည် အပ်ဒိတ်များဖန်တီးရန်အတွက် အထောက်အကူပေးသည့် ယန္တရားတစ်ခုကို အကောင်အထည်ဖော်ဆောင်ကာ ၎င်းဟုခေါ်သည်။ လေ့လာသူ. Observer အတွက် အရင်းအမြစ်တန်ဖိုးများကို ခေါ်သည်။ ထုတ်လုပ်သူ. ၎င်းသည် array၊ iterator၊ web socket၊ အချို့သော event အမျိုးအစားများ စသည်တို့ ဖြစ်နိုင်သည်။ ထို့ကြောင့် Observable သည် Producer နှင့် Observer ကြားတွင် conductor ဖြစ်သည်ဟု ဆိုနိုင်သည်။

Observable သည် Observer ဖြစ်ရပ်သုံးမျိုးအား ကိုင်တွယ်သည်-

• နောက်တစ်ခု - ဒေတာအသစ်
• error – ခြွင်းချက်တစ်ခုကြောင့် sequence ပြီးဆုံးသွားပါက အမှားအယွင်းတစ်ခုဖြစ်သည်။ ဤဖြစ်ရပ်သည် အစီအစဥ်ပြီးစီးမှုကိုလည်း ဆိုလိုသည်။
• ပြီးမြောက်သည် — အစီအစဥ်ပြီးစီးမှုအကြောင်း အချက်ပြပါ။ ဆိုလိုသည်မှာ ဒေတာအသစ်များ ရှိတော့မည်မဟုတ်ပါ။

ဒီမိုကို ကြည့်ရအောင်။

အစတွင် ကျွန်ုပ်တို့သည် တန်ဖိုးများ 1၊ 2၊ 3 နှင့် 1 စက္ကန့်ပြီးနောက် လုပ်ဆောင်ပါမည်။ ကျွန်ုပ်တို့သည် 4 ကိုရရှိပြီးကျွန်ုပ်တို့၏စီးကြောင်းကိုအဆုံးသတ်လိမ့်မည်။

အကျယ်ကြီးတွေးလိုက်မိသည်။

ပြီးတော့ အဲဒါကို ရေးတာထက် စာရေးတာက ပိုစိတ်ဝင်စားဖို့ကောင်းမှန်း သိလာတယ်။ 😀

subscription

ကျွန်ုပ်တို့သည် ထုတ်လွှင့်မှုကို စာရင်းသွင်းသည့်အခါ အတန်းသစ်တစ်ခု ဖန်တီးပါသည်။ ကြေးပေးသွင်းယင်းနည်းလမ်းကို အသုံးပြု၍ စာရင်းသွင်းမှုဖြုတ်ရန် စွမ်းရည်ကို ပေးသည်။ မှာယူမှုဖျက်. နည်းလမ်းကို အသုံးပြု၍ စာရင်းသွင်းမှုများကိုလည်း အုပ်စုဖွဲ့နိုင်ပါသည်။ ပေါင်း. ကောင်းပြီ၊ ကျွန်ုပ်တို့သည် စာတွဲများကို အသုံးပြု၍ အုပ်စုဖွဲ့နိုင်သည်မှာ ယုတ္တိရှိသည်။ ကိုဖယ်ရှား. ပေါင်းထည့်ခြင်းနှင့် ဖယ်ရှားခြင်းနည်းလမ်းများသည် အခြားစာရင်းသွင်းမှုကို ထည့်သွင်းမှုအဖြစ် လက်ခံသည်။ စာရင်းသွင်းခြင်းမှ ရပ်ဆိုင်းသည့်အခါ၊ ၎င်းတို့သည် စာရင်းသွင်းမှုမှ ပယ်ဖျက်ခြင်းနည်းလမ်းကို ခေါ်သကဲ့သို့ ကလေးစာရင်းသွင်းမှုအားလုံးကို စာရင်းသွင်းမှုမှ ရပ်ဆိုင်းကြောင်း သတိပြုစေလိုပါသည်။ ဆက်လုပ်သည်။

ချောင်းအမျိုးအစားများ

HOT
အအေး

ထုတ်လုပ်သူသည် ပြင်ပတွင် ဖန်တီးထားသည်ကို တွေ့မြင်နိုင်သည်။
ထုတ်လုပ်သူသည် မြင်သာထင်သာရှိအောင် ဖန်တီးထားသည်။

မြင်သာမြင်နိုင်သော ဖန်တီးထားချိန်တွင် ဒေတာကို လွှဲပြောင်းသည်။
စာရင်းသွင်းချိန်တွင် ဒေတာပေးပါသည်။

စာရင်းသွင်းမှုရပ်ဆိုင်းခြင်းအတွက် နောက်ထပ်ယုတ္တိဗေဒလိုအပ်ပါသည်။
ကြိုးသည် သူ့ဘာသာသူ ရပ်စဲသည်။

တစ်ဦးမှ အများအပြား ဆက်ဆံရေးကို အသုံးပြုသည်။
တစ်ဦးမှတစ်ဦး ဆက်ဆံရေးကို အသုံးပြုသည်။

စာရင်းသွင်းမှုအားလုံးသည် တူညီသော အဓိပ္ပါယ်ရှိသည်။
စာရင်းသွင်းမှုများသည် သီးခြားဖြစ်သည်။

စာရင်းသွင်းမှုမရှိပါက ဒေတာဆုံးရှုံးနိုင်သည်။
စာရင်းသွင်းမှုအသစ်အတွက် တိုက်ရိုက်ထုတ်လွှင့်မှုတန်ဖိုးများအားလုံးကို ပြန်လည်ထုတ်ပေးသည်။

နှိုင်းယှဥ်ပြရန်၊ ဇာတ်ရုံတစ်ရုံတွင် ရုပ်ရှင်တစ်ကားအဖြစ် ဟော့ပ်စီးကြောင်းကို တွေးကြည့်မိသည်။ မင်းဘယ်အချိန်ရောက်နေပြီလဲ၊ အဲဒီအခိုက်အတန့်ကစပြီး မင်းကြည့်တယ်။ အေးစက်စက်ကို နည်းပညာခေါ်ဆိုမှုတစ်ခုနဲ့ နှိုင်းယှဉ်ကြည့်မယ်။ ထောက်ခံမှု။ ခေါ်ဆိုသူတိုင်းသည် အသံမေးလ်ကို အစမှ အဆုံးအထိ နားထောင်သော်လည်း စာရင်းသွင်းမှုမှ ဖြုတ်ရန် အသုံးပြု၍ ဖုန်းချနိုင်သည်။

နွေးထွေးသော စီးဆင်းမှုများလည်း ရှိသည်ကို သတိပြုစေလိုပါသည် (ဤအဓိပ္ပါယ်မှာ အလွန်ရှားရှားပါးပါးဖြစ်ပြီး နိုင်ငံခြားအသိုင်းအဝိုင်းများတွင်သာ တွေ့ခဲ့ရပါသည်)၊ ဤသည် အအေးစီးကြောင်းမှ ပူသော စီးဆင်းမှုသို့ ပြောင်းလဲသည့် စီးဆင်းမှုဖြစ်သည်။ မေးစရာရှိလာတာက - ဘယ်မှာသုံးရလဲ)) လက်တွေ့မှာ ဥပမာတစ်ခုပြောပြမယ်။

ကျွန်တော် 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)
    );

အော်ပရေတာများသည် stream များနှင့်အတူအလုပ်လုပ်နိုင်စွမ်းကိုချဲ့ထွင်ရန်ကျွန်ုပ်တို့အားပေးစွမ်းနိုင်သည်။ သူတို့သည် Observable တွင်ဖြစ်ပျက်နေသောအဖြစ်အပျက်များကိုထိန်းချုပ်ကူညီပေးသည်။ ကျွန်ုပ်တို့သည် လူကြိုက်အများဆုံး နှစ်ခုကို ကြည့်ရှုမည်ဖြစ်ပြီး အသုံးဝင်သော အချက်အလက်များတွင် လင့်ခ်များကို လိုက်နာခြင်းဖြင့် အော်ပရေတာများအကြောင်း ပိုမိုသိရှိနိုင်မည်ဖြစ်သည်။

လုပ်ငန်းရှင်များ - ၏

အရန်အော်ပရေတာဖြင့် စတင်ကြပါစို့။ ၎င်းသည် ရိုးရှင်းသောတန်ဖိုးကို အခြေခံ၍ Observable တစ်ခုကို ဖန်တီးသည်။

အော်ပရေတာ - ဇကာ

အမည်အကြံပြုထားသည့်အတိုင်း စစ်ထုတ်သည့်အော်ပရေတာသည် ထုတ်လွှင့်မှုအချက်ပြမှုကို စစ်ထုတ်သည်။ အော်ပရေတာမှ အမှန်ပြန်တက်လာပါက ၎င်းသည် နောက်ထပ်ကျော်သွားမည်ဖြစ်သည်။

လုပ်ငန်းရှင်များ - ယူပါ။

ယူသည် - ချည်မျှင်အဆုံးသတ်ပြီးနောက် ထုတ်လွှတ်သည့်အရေအတွက်၏တန်ဖိုးကို ယူသည်။

အော်ပရေတာများ - 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 false ပြန်မလာမချင်း တန်ဖိုးများကို ထုတ်လွှတ်သည်၊ ထို့နောက်တွင် ၎င်းသည် thread မှ စာရင်းသွင်းမှုမှ ဖြုတ်လိုက်ပါသည်။

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

အော်ပရေတာများ - ပေါင်းစပ်နောက်ဆုံးပေါ်

ပေါင်းစပ်နောက်ဆုံးပေါ်အော်ပရေတာသည် promise.all နှင့် အနည်းငယ်ဆင်တူသည်။ ၎င်းသည် thread အများအပြားကို တစ်ခုတည်းအဖြစ် ပေါင်းစပ်ထားသည်။ thread တစ်ခုစီသည် အနည်းဆုံး emission တစ်ခုပြုလုပ်ပြီးနောက်၊ array ပုံစံတစ်ခုစီမှ တစ်ခုစီမှ နောက်ဆုံးတန်ဖိုးများကို ကျွန်ုပ်တို့ ရရှိပါသည်။ ထို့အပြင်၊ ပေါင်းစည်းထားသော စမ်းချောင်းများမှ ထုတ်လွှတ်မှု တစ်ခုခုပြီးနောက်၊ ၎င်းသည် တန်ဖိုးအသစ်များကို ပေးလိမ့်မည်။

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

အော်ပရေတာ - ဇစ်

ဇစ် - စာတွဲတစ်ခုစီမှ တန်ဖိုးတစ်ခုကို စောင့်ပြီး ဤတန်ဖိုးများပေါ်အခြေခံ၍ အခင်းအကျင်းတစ်ခုကို ဖန်တီးပါ။ အကယ်၍ တန်ဖိုးသည် မည်သည့်အကြောင်းအရာမှ မလာပါက၊ အဖွဲ့ကို ဖွဲ့စည်းမည်မဟုတ်ပါ။

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 သည် threads များနှင့်လည်း ချိတ်ဆက်ထားသော်လည်း thread များအားလုံးပြီးသောအခါမှသာ တန်ဖိုးတစ်ခု ထုတ်လွှတ်ပါသည်။

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

အော်ပရေတာများ - မျှဝေပါ၊ နှိပ်ပါ။

အသာပုတ်အော်ပရေတာသည် သင့်အား ဘေးထွက်ဆိုးကျိုးများပြုလုပ်နိုင်စေသည်၊ ဆိုလိုသည်မှာ အစီအစဥ်ကိုမထိခိုက်စေသော မည်သည့်လုပ်ဆောင်ချက်မဆို ပြုလုပ်နိုင်စေပါသည်။

မျှဝေသုံးစွဲမှုအော်ပရေတာသည် အေးသောစမ်းချောင်းကို ပူပြင်းသည့်အဖြစ်သို့ ပြောင်းလဲနိုင်သည်။

အော်ပရေတာတွေနဲ့ ပြီးသွားပါပြီ။ Subject ကို ဆက်သွားရအောင်။

အကျယ်ကြီးတွေးလိုက်မိသည်။

ပြီးတော့ လက်ဖက်ရည်သောက်ဖို့ သွားလိုက်တယ်။ ဒီဥပမာတွေကို ငြီးငွေ့လာတယ်။

ကာယကံရှင် မိသားစု

ဘာသာရပ်မိသားစုသည် hot flow ၏အဓိကဥပမာတစ်ခုဖြစ်သည်။ ဤအတန်းများသည် လေ့လာသူနှင့် စောင့်ကြည့်သူအဖြစ် တပြိုင်နက် လုပ်ဆောင်သည့် ပေါင်းစပ်တစ်မျိုးဖြစ်သည်။ Subject သည် hot thread တစ်ခုဖြစ်သောကြောင့် ၎င်းကို စာရင်းသွင်းမှုမှ ပယ်ဖျက်ရန် လိုအပ်ပါသည်။ အဓိကနည်းလမ်းတွေအကြောင်းပြောရင်၊

• နောက်တစ်ခု - ဒေတာအသစ်ကို တိုက်ရိုက်ထုတ်လွှင့်မှုသို့ လွှဲပြောင်းပါ။
• အမှား- အမှားနှင့် ကြိုးပြတ်တောက်မှု
• ပြီးမြောက်သည် - ကြိုး၏ပြီးစီးမှု
• စာရင်းသွင်းပါ - ထုတ်လွှင့်မှုကို စာရင်းသွင်းပါ။
• စာရင်းသွင်းမှုဖြုတ်ပါ - ထုတ်လွှင့်မှုမှ စာရင်းသွင်းမှုကို ရပ်ဆိုင်းပါ။
• asObservable – လေ့လာသူအဖြစ် ပြောင်းလဲပါ။
• to Promise – ကတိတစ်ခုအဖြစ် ပြောင်းလဲသည်။

ဘာသာရပ် 4 5 မျိုးရှိပါတယ်။

အကျယ်ကြီးတွေးလိုက်မိသည်။

စမ်းချောင်းတွင် လူ 4 ယောက် စကားပြောနေသော်လည်း နောက်တစ်ယောက် ထပ်ထည့်လိုက်သည် ။ သူတို့ပြောသလို နေထိုင်ပြီး သင်ယူပါ။

ရိုးရှင်းသောဘာသာရပ် new Subject()- အရိုးရှင်းဆုံးဘာသာရပ်အမျိုးအစား။ ကန့်သတ်ချက်များမပါဘဲ ဖန်တီးထားသည်။ စာရင်းသွင်းပြီးမှသာ လက်ခံရရှိသောတန်ဖိုးများကို ပေးပို့ပါသည်။

အပြုအမူဘာသာရပ် new BehaviorSubject( defaultData<T> ) - ကျွန်တော့်အမြင်အရတော့ အသုံးအများဆုံးဘာသာရပ်ပါ။ ထည့်သွင်းမှုသည် မူရင်းတန်ဖိုးကို ယူသည်။ စာရင်းသွင်းသည့်အခါ ထုတ်လွှင့်သည့် နောက်ဆုံးထုတ်စာစောင်၏ ဒေတာကို အမြဲသိမ်းဆည်းသည်။ ဤအတန်းတွင် ထုတ်လွှင့်မှု၏ လက်ရှိတန်ဖိုးကို ပြန်ပေးသည့် အသုံးဝင်သော တန်ဖိုးနည်းလမ်းလည်း ရှိပါသည်။

ပြန်ဖွင့်ဘာသာရပ် new ReplaySubject(bufferSize?: number, windowTime?: number) — ထည့်သွင်းမှုသည် သူ့အလိုလို သိမ်းဆည်းမည့် တန်ဖိုးများ၏ ကြားခံအရွယ်အစား၏ ပထမအငြင်းအခုံအဖြစ် စိတ်ကြိုက်ရွေးချယ်နိုင်ပြီး၊ ကျွန်ုပ်တို့ အပြောင်းအလဲလိုအပ်သည့် ဒုတိယအချိန်အဖြစ် စိတ်ကြိုက်ရွေးချယ်နိုင်သည်။

AsyncSubject new AsyncSubject() - စာရင်းသွင်းသည့်အခါ ဘာမှမဖြစ်ပါ၊ ပြီးပါက တန်ဖိုးကို ပြန်ပေးပါမည်။ ထုတ်လွှင့်မှု၏ နောက်ဆုံးတန်ဖိုးကိုသာ ပြန်ပေးပါမည်။

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - စာရွက်စာတမ်းက သူ့အကြောင်း နှုတ်ဆိတ်နေပြီး သူ့ကို ပထမဆုံးအကြိမ် တွေ့တာပါ။ သူဘာလုပ်နေလဲ သိတဲ့သူရှိရင် ကျေးဇူးပြုပြီး ရေးပေးပါ့မယ်။

ဝှူး။ ကောင်းပြီ၊ ငါတို့ ဒီနေ့ မင်းကို ပြောပြချင်တဲ့အရာအားလုံးကို ပြီးသွားပြီ။ ဒီအချက်အလက်က အသုံးဝင်မယ်လို့ မျှော်လင့်ပါတယ်။ အသုံးဝင်သော အချက်အလက်တက်ဘ်တွင် သင်ကိုယ်တိုင် ကိုးကားချက်များစာရင်းကို သင်ဖတ်နိုင်သည်။

ထောကျအကူပွုသတင်းအချက်အလက်များ

• ထုတ်လွှင့်ရန် လင့်ခ်
• JS အလုပ်လုပ်ပုံ- အင်ဂျင်၏ခြုံငုံသုံးသပ်ချက်၊ runtime ယန္တရားများ၊ ခေါ်ဆိုမှုအစု
• JS အလုပ်လုပ်ပုံ- Event Loop၊ Asynchrony နှင့် async/ait ဖြင့် သင့်ကုဒ်ကို ပိုမိုကောင်းမွန်အောင် ပြုလုပ်ရန် နည်းလမ်းငါးခု
• JavaSript တွင် Event Loop အလုပ်လုပ်ပုံ
• Asynchronous JavaScript ၏ဆင့်ကဲဖြစ်စဉ်
• RxJS ဆိုတာ ဘာလဲ၊ အဲဒါကို သိဖို့ ဘာကြောင့် အသုံးဝင်တာလဲ။
  
• RxJS ၏လက်တွေ့အသုံးချမှု
• RxJS Observables ကျူတိုရီရယ် — Observables ကို ဖန်တီးခြင်းနှင့် စာရင်းသွင်းခြင်း။
• RXJS- အပူနှင့်အအေး ရှုမြင်နိုင်သော အရာများ
• Observable ဖန်တီးရန်အတွက် အတန်းများ၊ လုပ်ဆောင်ချက်များ။ လုပ်ငန်းရှင်များ။
• ဥပမာအားဖြင့် RxJS အော်ပရေတာများ
• API စာရင်း
• RxJS ရှိ ဘာသာရပ်နှင့် အချိန်ဇယားများ အမျိုးအစားများ

source: www.habr.com