Diamati dan Janji dalam Angular

Pada artikel ini, kita akan membahas Observable dan Promise in Angular dengan bantuan implementasi praktis langkah demi langkah.

Jadwal acara

• Sinkron Vs Asinkron
• Observable Vs Janji

• Dalam proses Sinkron, banyak tugas dijalankan satu demi satu yang berarti tugas kedua sedang menunggu selesainya tugas pertama. Dalam hal ini, utas harus menunggu sebelum pindah ke tugas lain.
• Sisi lain, Dalam proses asinkron ada banyak proses yang dijalankan secara bersamaan tidak akan menunggu tugas sebelumnya selesai. Itu hanya akan pindah ke tugas berikutnya dan memulai eksekusi.

Pancarkan Nilai

var observable = new Observable(res => {
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
    });
    observable.subscribe(console.log)

    //Output --> Observable can emmit multiple values
    //Hello Piyush
    //Hello Vivek
    //Hello Rajesh

    var promise = new Promise(res => {
      res("Hello Piyush");
      res("Hello Vivek");
      res("Hello Rajesh");
    });
    promise.then(console.log)

    //output
    //Hello Piyush --> Promise will emit only single values that's why other two values are not emmited.

var observable = new Observable(res => {
      res.next("Hello....");
    });
observable.subscribe(console.log) //Whenever subscribe observable then only it will emmit values beacuse it is lazy load.

//Output
//Hello....

var promise = new Promise(res => {
      console.log("Promise start executing..."); //In console can see this output before calling promise it will initialized on creation and eagerly load.
      res("Hello....");
    });
//Call promise
promise.then(console.log)

//Output
//Promise start executing...
//Hello....

//Async Promise
var promise = new Promise(res => {
      console.log("Start Executing...");

      res("Hello...");

      console.log("Execution End...");
    });
promise.then(console.log)

//Output
//Start Executing...
//Execution End...
//Hello...


//Async Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      setTimeout(() => {
        res.next("Hello Piyush");
        res.next("Hello Vivek");
        res.next("Hello Rajesh");
      })
        , 1000
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Execution End...
//Hello Piyush
//Hello Vivek
//Hello Rajesh

//Sync Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Hello Piyush
//Hello Vivek
//Hello Rajesh
//Execution End...

Dalam beberapa kasus, kita perlu berhenti berlangganan yang dapat diamati jika diperlukan karena dijalankan di latar belakang dan terkadang akan menimbulkan masalah kebocoran memori. Itu sebabnya kita perlu menangani skenario itu.

//observable
    const observable = new Observable((res) => {

      let count = 0;
        setInterval(() => {
          count = count + 1;
          res.next(count);
        }
          , 1000)
    })

//subscribe the observable
    this.subscription = observable.subscribe(ele => { console.log(ele) })

//unsubscribe the observable
    setTimeout(() => {
      this.subscription?.unsubscribe();
    }
    ,12000)

Periksa tautan di bawah ini terkait dengan dokumentasi resmi untuk memahami lebih lanjut tentang RxJS

https://rxjs.dev/guide/overview

Tautan GitHub

https://github.com/Jaydeep-007/ObservableAndPromiseDemo/tree/master

Kesimpulan

Pada artikel ini, kami membahas perbedaan antara Promise dan Observable dengan beberapa contoh praktis.

Selamat Belajar!