Working with Custom Observable

Photo by Lefteris kallergis on Unsplash

Building a Custom Observable

Observable အသုံးပြုပုံကို interval() method နဲ့စမ်းသပ် လေ့လာခဲ့ပြီး ဖြစ်ပါတယ်။ ဒီတစ်ခါမှာတော့ ကိုယ်ပိုင် Observable method တစ်ခုကို ဘယ်လိုရေးသားရမလဲဆိုတာ လေ့လာရမှာပါ။

HomeComponent မှာ အခုလို ရေးလိုက်ပါ။ interval() ကိုပဲ ကိုယ်တိုင် custom method ရေးလိုက်တာ ဖြစ်ပါတယ်။

customInterval() {
    return new Observable((observer) => {
      let count = 0;
      setInterval(() => {
        observer.next(count);
        count++;
      }, 1000);
    });
 }

Observable တစ်ခုကို new နဲ့အခုလို ဆောက်ရပါတယ်။ rxjs ကနေ import လုပ်ပေးဖို့မမေ့ပါနဲ့။ callback function ထဲမှာ code တစ်ချို့ရေးပြီး observer အတွက် လိုအပ်တဲ့ data ထုတ်ပေးဖို့ observer.next() နဲ့ emit လုပ်လိုက်ပါတယ်။

ဒီလိုထုတ်ပေးရာမှာ next(), error(), complete() ဆိုပြီး ၃ မျိုးရှိပါတယ်။

next() က data emit လုပ်ဖို့သုံးပါတယ်။

error() က error ဖြစ်ကြောင်း emit လုပ်ဖို့သုံးပါတယ်။ error ဖြစ်သွားရင် emit လုပ်တာ လုံးဝ ရပ်သွားမှာဖြစ်ပါတယ်။ ဆက် emit လို့ မရတော့ပါ။

complete() ကတော့ data emit လုပ်ခြင်း ပြီးဆုံးကြောင်း data ထပ် emit လုပ်မှာမဟုတ်တော့ကြောင်း ပြောဖို့အတွက် သုံးပါတယ်။

ခေါ်သုံးဖို့ကတော့ ngOnInit() မှာ အခုလို ရေးလိုက်ပါ။

ngOnInit(): void {
    // this.firstSub = interval(1000).subscribe((count: number) => {
    //   console.log(count);
    // });
    this.firstSub = this.customInterval().subscribe((count) => {
          console.log(count);
    });
}

အရင် interval() သုံးခဲ့တာကို comment ပိတ်လိုက်ပြီး customInterval() ကိုပြောင်းခေါ်လိုက်ပါ။ ပြီးရင်တော့ ပြန်စမ်းကြည့်ရင် အရင်အတိုင်းဆက်ပြီး အလုပ်လုပ်နေတာကို တွေ့ရမှာပါ။

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

Errors and Completion

Observable ကနေnext() နဲ့ data emit လုပ်နိုင်ကြောင်း သိပြီးတဲ့နောက် error နဲ့ completion တွေကိုဘယ်လို emit လုပ်ပြီး ဘယ်လို handle လုပ်မလဲဆိုတာ ဆက်လေ့လာရပါမယ်။

အရင်ဆုံး error emit လုပ်ခြင်းနဲ့ handle လုပ်ခြင်းကို စမ်းသပ်ပါမယ်။

customInterval() ရဲ့ setInterval() ထဲမှာ အခုလို ထပ်ထည့်ပါ။

setInterval(() => {
  if (count > 3) 
    observer.error(new Error('Count is greater than 3!'));
  observer.next(count);
  count++;
}, 1000);

count 3 ထပ်ကျော်သွားရင် error emit လုပ်လိုက်တာပါ။ သတိထားရမှာကတော့ error emit လုပ်လိုက်ရင် observable ရပ်သွားပြီး emit ဆက်လုပ်လို့ရမှာ မဟုတ်တော့ပါ။

error ကို handle လုပ်ဖို့ကတော့ ngOnInit() ထဲမှာ အခုလို ပြင်လိုက်ပါ။

this.firstSub = this.customInterval().subscribe(
      (count) => {
        console.log(count);
      },
      (error) => {
        alert(error.message);
      }
);

subscribe() ရဲ့ second param အနေနဲ့ error ကိုလက်ခံလိုက်ပြီး handle လုပ်လိုက်တာ တွေ့ရမှာပါ။

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

Observable error

Completion စမ်းဖို့အတွက် setInterval() အပေါ်နားလေးမှာ အခုလို ရေးလိုက်ပါ။

setInterval(() => {
    if (count == 2) observer.complete();
...

count 2 ဖြစ်ရင် ဆက် emit မလုပ်တော့ဖို့အတွက် complete() ခေါ်လိုက်တာဖြစ်ပါတယ်။ complete ဖြစ်သွားရင် observable လုံးဝ ရပ်သွားမှာ ဖြစ်ပါတယ်။ အကယ်၍ complete မခေါ်ခင် error တက်သွားရင် complete ကိုဆက်မခေါ်ပေးပါ။

complete ဖြစ်သွားပြီးမှ လုပ်စေချင်တဲ့ code တွေရှိရင်အခုလို handle လုပ်နိုင်ပါတယ်။ ngOnInit() ထဲမှာအခုလိုရေးပါ။

this.firstSub = this.customInterval().subscribe(
      (count) => {
        console.log(count);
      },
      (error) => {
        alert(error.message);
      },
      () => {
        console.log('Completed!');
      }
 );

subscribe() ရဲ့ third param အနေနဲ့ complete ကိုလက်ခံရရှိပြီး handle လုပ်လိုက်ပါတယ်။ complete က data မပါတဲ့အတွက် no argument အနေနဲ့ ရေးထားတာကို တွေ့ရမှာပါ။

ပြန်စမ်းကြည့်ရင်တော့ ဒီလိုတွေ့ရမှာပါ။

Observable completion

ဒီနည်းတွေနဲ့ Observable တစ်ခုကို လိုအပ်သလို emit လုပ်နိုင် handle လုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Previous: Observable

Next: Operators