Operators

Photo by Alexandre Debiève on Unsplash

Observable ကနေရရှိလာတဲ့ data ကို တန်းလက်မခံပဲ လိုချင်တဲ့ပုံစံ ပြောင်းပြီးမှ ရယူချင်တယ်ဆိုရင် Operators တွေကို အသုံးပြုနိုင်ပါတယ်။

Filter

Operators ရဲ့ အသုံးဝင်ပုံကို မြင်သာစေဖို့အတွက် အခုလို ရေးကြပါမယ်။ HomeComponent ရဲ့ ngOnInit() မှာ အခုလိုထပ်ရေးပါ။

rxjs filter

Operators တွေအသုံးပြုဖို့အတွက် pipe() ကိုသုံးရပါတယ်။ subscribe() ရဲ့ရှေ့မှာရေးပေးရပါတယ်။ pipe() ထဲမှာအသုံးပြုချင်တဲ့ operators တွေကို rxjs/operators ကနေ import လုပ်ပေးဖို့လိုပါတယ်။ အခုက filter ကိုသုံးမှာဖြစ်လို့ အခုလို import လုပ်ပေးပါ။

import for filter

filter ထဲမှာတော့ count 0 မဖြစ်တာပဲ ပေးဖို့ရေးထားပါတယ်။ ဒါကြောင့် ပြန်စမ်းကြည့်ရင် 0 မပါတော့ပဲ 1 ကနေပဲစတော့မှာ ဖြစ်ပါတယ်။

localhost logs

Map

pipe() မှာ တစ်ခုထပ်မက operator တွေကို ရေးသားနိုင်ပါတယ်။ လက်တွေ့ လုပ်ကြည့်နိုင်ဖို့အတွက် အခုလို ထပ်ရေးပါ။

rxjs map

import ကိုတော့ အခုလိုရေးပါ။

import for map

ခုရေးလိုက်တာကတော့ filter လုပ်လို့ရလာတဲ့ data ကိုမှ map နဲ့ပြုပြင်လိုက်တာ ဖြစ်ပါတယ်။ ရလဒ်အနေနဲ့ အခုလို ဖြစ်သွားမှာ ဖြစ်ပါတယ်။

localhost’s logs

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

Tap

Pipe ထဲမှာ လက်ခံရရှိတဲ့ data ကို log ထုတ်ကြည့်ချင်တဲ့အခါ၊ ဒါမှမဟုတ် operators တွေသုံးပြီး data ကို ပြုပြင်လိုက်ရင် ဘယ်လိုပုံစံ ထွက်လာလဲ စစ်ချင်တဲ့အခါ အသုံးပြုနိုင်ပါတယ်။

rxjs tap

နမူနာမှာဆိုရင် မပြုပြင်ရသေးတဲ့ data နဲ့ ပြုပြင်ပြီး data ကို log ထုတ်ထားတာ တွေ့ရမှာပါ။ ဒီနည်းနဲ့ အလွယ်တကူ debug လုပ်နိုင်ပါတယ်။

console log

Take

Observable မှ emit ဘယ်နှကြိမ်ထိ ယူမယ်ဆိုတာ သတ်မှတ်ဖို့ သုံးပါတယ်။ ဥပမာ customInterval မှ emit ၃ ကြိမ်ထိပဲ ယူမယ်ဆိုရင် အခုလို ရေးနိုင်ပါတယ်။

rxjs take

CatchError

Observable က error emit လုပ်လိုက်ရင် တခြား observable ကို ပြောင်းခေါ်စေချင်ရင်ဖြစ်စေ၊ retry ပြန်လုပ်စေချင်ရင်ဖြစ်စေ၊ error ကို ပုံစံပြောင်းချင်ရင် ဖြစ်စေ သုံးနိုင်ပါတယ်။

တခြား Observable သို့ ပြောင်းခေါ်ပေးခြင်း

rxjs catchError — 1

Error တက်ရင် interval() ကို ပြောင်းခေါ်လိုက်တာ ဖြစ်ပါတယ်။ take(10) ဖြစ်လို့ total 10 ကြိမ်ပဲ emit လုပ်စေပါတယ်။

console logs

Error ဖြစ်ရင် retry ပြန်လုပ်စေခြင်း

Second parameter ကို return ပြန်လိုက်ရင် observable ကို ပြန်ခေါ်ပေးစေပါတယ်။

rxjs catchError — 2

Console မှာ ကြည့်ရင် အခုလို တွေ့ရမှာပါ။

console logs

Error လက်ခံပြီး error အသစ်တစ်ခု ထုတ်ပေးခြင်း

အခုလိုမျိုး error အသစ်ပြောင်းပြီး ထုတ်ပေးလို့လည်းရတယ်။ subscribe ထဲက error handler ထဲမှာ error.message ကို error လို့ပဲထားလိုက်ပါ။

rxjs catchError — 3

ဒါဆိုရင်အခုလို error message ပြောင်းသွားတာ တွေ့ရမှာပါ။

alert box

ExhaustMap

Observable တစ်ခုက emit လုပ်လိုက်တဲ့ data ကိုသုံးပြီး တခြား observable ကိုခေါ်ချင်ရင် သုံးနိုင်ပါတယ်။ HomeComponent မှာပဲ method တစ်ခု ထပ်ရေးပြီး ngOnInit ကခေါ်ပေးလိုက်ပါ။

rxjs exhaustMap

ဒီမှာဆိုရင် customInterval က emit တစ်ခါလုပ်ရင် interval ဆီက emit ၃ ခါယူဖို့ရေးထားတာတွေ့ရမှာပါ။ ရလဒ်အနေနဲ့အခုလိုထွက်လာပါတယ်။

console logs

သတိထားရမှာကတော့ exhaustMap သည် သူ့ထဲက observable ကို complete ဖြစ်သည်ထိ စောင့်ပါတယ်။ complete မဖြစ်မချင်း အပြင်က ထပ်ဝင်လာတဲ့ data အသစ်ကို လက်ခံမှာမဟုတ်ပါ။

ဒါကြောင့် Form တွေကို submit လုပ်တဲ့အခါ user က submit button ကိုအကြိမ်ကြိမ်နှိပ်လို့ http request တွေ အများကြီး ထွက်သွားမှာကို ကာကွယ်ချင်တဲ့အခါ exhaustMap ကို အသုံးပြုလို့ ရပါတယ်။

RxJS မှာ build-in operators များစွာရှိပါတယ်။ အသေးစိတ်လေ့လာလိုပါက အောက်ပါတို့မှာ လေ့လာပါ။

Introduction

Understanding RxJS

RxJS 6 - What Changed?

Previous: Working with Custom Observable

Next: Useful Built-in Observables