Pengenalan tentang Observables dan perbedaannya dengan promise

'Dapat diamati ', 'Dapat diamati ', 'Dapat diamati ' ... Ya! Hari ini, kita akan membicarakan tentang kata pasar yang sering dibahas ini. Kami juga akan mempelajari perbedaannya dari Promises (belum pernah mendengar tentang Promises? Tidak perlu khawatir! Anda akan segera tahu lebih banyak). Ayo mulai!

Saya pertama kali menemukan istilah Observable ketika saya mulai belajar Angular. Meskipun ini bukan fitur khusus Angular, ini adalah cara penanganan yang baruasinkronpermintaan. Permintaan asinkron? Anda tahu itu, bukan? Tidak! Tidak apa-apa. Pertama mari kita pahami apa itu permintaan asinkron .

Permintaan Asinkron

Baik! Anda pasti pernah membaca tentang fitur asinkron di dunia JavaScript. ' Asynchrony ' dalam dunia komputer berarti aliran program terjadi secara mandiri. Itu tidak menunggu tugas selesai. Ini pindah ke tugas berikutnya.

Sekarang, Anda mungkin berpikir - apa yang terjadi dengan tugas yang belum selesai? Rekan kerja menangani tugas yang belum selesai tersebut. Iya! Di latar belakang, rekan kerja bekerja dan menangani tugas-tugas yang belum selesai itu dan setelah selesai, data dikirim kembali.

Ini dapat memunculkan pertanyaan lain tentang bagaimana kami menangani data yang dikembalikan. Jawabannya adalah Promises , Observables , callbacks dan banyak lagi.

Kita tahu bahwa operasi asinkron ini mengembalikan respons, baik beberapa data setelah berhasil atau error. Untuk menangani ini, konsep-konsep seperti Promises , callbacks , observable datang ke pasar. Baik! Saya tidak akan membahasnya sekarang karena kita telah menyimpang dari sub topik kita yaitu permintaan ' async '. (Jangan khawatir! Topik-topik ini akan segera dibahas).

Setelah membahas poin-poin di atas, Anda mungkin sudah mendapat gambaran kasar tentang apa itu permintaan async . Mari kita perjelas. Sebuah Async permintaan adalah salah satu di mana klien tidak menunggu respon. Tidak ada yang diblokir. Mari kita pahami konsep ini dengan melihat skenario yang sangat umum.

Di dunia web, cukup umum untuk menekan server untuk mendapatkan data seperti detail pengguna, daftar, dan sebagainya. Kami tahu ini akan memakan waktu dan apapun bisa mengikuti (sukses / gagal).

kasus ini, alih-alih menunggu data datang, kami menanganinya secara asinkron (tanpa menunggu) agar aplikasi kami tidak diblokir. Permintaan semacam itu adalah permintaan asinkron. Saya pikir sekarang kita sudah jelas dengannya. Jadi mari kita lihat bagaimana kita sebenarnya dapat menangani permintaan asinkron ini.

Seperti yang sudah saya katakan, Observables memberi kami cara baru untuk menangani permintaan async. Cara lainnya adalah promise, callback, dan async / await. Ini adalah cara yang populer. Mari kita lihat dua di antaranya yaitu panggilan balik dan janji.

Panggilan balik

Callback cukup umum. Fungsi panggilan balik (seperti namanya) dipanggil di belakang. Saat itulah permintaan selesai dan mengembalikan data atau kesalahan, fungsi-fungsi ini dipanggil. Lihat kode untuk pemahaman yang lebih baik:

const request = require(‘request’); request('//www.example.com', function (err, response, body) { if(error){ // Error handling } else { // Success } });

Ini adalah salah satu cara menangani permintaan asinkron. Tetapi apa yang terjadi ketika kita ingin meminta kembali ke server untuk data setelah berhasilnya permintaan pertama? Bagaimana jika kita ingin membuat permintaan ketiga setelah permintaan kedua yang berhasil? Mengerikan!

Pada titik ini, kode kita akan menjadi berantakan dan kurang dapat dibaca. Ini disebut ' callback hell '. Untuk mengatasinya, janji datang. Mereka menawarkan cara yang lebih baik untuk menangani permintaan async yang meningkatkan keterbacaan kode. Mari kita mengerti lebih banyak.

Janji

Janji adalah objek yang menjanjikan akan memiliki nilai dalam waktu dekat - baik sukses maupun gagal. Janji memiliki metodenya sendirikemudian dan menangkap . .then () dipanggil saat kesuksesan datang, jika tidak, metode catch () akan memanggil.  Janjidibuat menggunakan konstruktor janji . Lihat kode untuk lebih memahami.

function myAsyncFunction(name){ return new Promise(function(resolve, reject){ if(name == ‘Anchal’){ resolve(‘Here is Anchal’) } else{ reject(‘Oops! This is not Anchal’) } } } myAsyncFunction(‘Anchal’) .then(function(val){ // Logic after success console.log(val) // output - ‘Here is Anchal’ }) .catch(function(val){ //Logic after failure console.log(val) // output - ‘Oops! This is not Anchal’ })

Seperti yang Anda lihat, myAsyncFunction sebenarnya menjanjikan bahwa ini akan memiliki nilai dalam waktu dekat. .then () atau .catch () dipanggil sesuai dengan status promise.

Berjanji meningkatkan keterbacaan kode . Anda dapat melihat seberapa terbaca kode tersebut dengan menggunakan promise. Penanganan operasi asinkron yang lebih baik dapat dicapai dengan menggunakan Promises. Ini adalah pengantar singkat tentang apa itu janji, bagaimana janji itu menangani data, dan janji kecantikan apa yang dibawa.

Sekarang, saatnya mempelajari topik utama kita: Yang dapat diamati.

Apa yang bisa diamati?

Observable juga seperti callback dan promise - yang bertanggung jawab untuk menangani permintaan asinkron. Observable adalah bagian dari library RXJS . Perpustakaan ini memperkenalkan Observables.

Sebelum memahami apa sebenarnya yang bisa diamati itu, Anda harus memahami dua model komunikasi: tarik dan dorong . Kedua konsep ini adalah protokol tentang bagaimana produsen data berkomunikasi dengan konsumen data.

Model Tarik & Dorong

Seperti yang sudah saya katakan, Push and Pull adalah protokol komunikasi antara produsen data dan konsumen. Mari kita pahami keduanya satu per satu.

Model Tarik: Dalam model ini, konsumen data adalah raja . Artinya konsumen data menentukan kapan menginginkan data dari produsen. Produsen tidak memutuskan kapan data akan dikirim. Anda bisa lebih memahami jika Anda menghubungkan fungsi dengannya.

Seperti yang kita ketahui, fungsi bertanggung jawab untuk melakukan beberapa tugas. Misalnya, dataProducer adalah fungsi yang mengembalikan string, seperti " Hi Observable ".

function dataProducer(){ return ‘Hi Observable’; }

Sekarang, Anda dapat melihat bahwa fungsi di atas tidak akan memutuskan kapan akan mengirimkan string 'Hi Observable'. Ini akan ditentukan oleh konsumen, yaitu kode yang memanggil fungsi ini. Konsumen adalah raja. Alasan mengapa disebut model tarik adalah karena tugas tarik menentukan komunikasi. Ini adalahituModel tarik . Sekarang, mari masuk ke Model Push .

Model Dorong: Dalam model ini, penghasil data adalah raja . Produsen menentukan kapan harus mengirim data ke konsumen. Konsumen tidak tahu kapan data akan datang. Mari kita pahami dengan mengambil contoh:

Saya harap Anda ingat janji . Ya, Janji mengikuti model dorong .  A Promise (producer) mengirimkan data ke callback ( .then () - consumer). Callback tidak tahu kapan data akan datang. Di sini, janji (produser) adalah raja. Ini menentukan komunikasi. Itu sebabnya disebut Model Dorong karena produser bertanggung jawab.

Like promises, Observables also follow the push model. How? You will get the answer once I elaborate on observables. Let’s get back to observables then.

Observables as functions

To simply understand, you can think of observables as functions. Let’s have a look at the below examples:

function dataProducer(){ return ‘Hi Observable’ } var result = dataProducer(); console.log(result) // output - ‘Hi Observable’ 

You can get the same behaviour using an observable:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); }) observable.subscribe((data)=>{ console.log(data); // output - ‘Hi Observable’ })

From above, you can see both functions and observables show the same behaviour. This may bring a question to your mind - are observables the same as functions? No. I'll clarify in a minute why the answer is no. Have a look at an elaborate version of the above example.

function dataProducer(){ return ‘Hi Observable’; return ‘Am I understandable?’ // not a executable code. } var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); observer.next( ‘Am I understandable?’ ); }) observable.subscribe((data)=>{ console.log(data); }) Output : ‘Hi Observable’ ‘Am I understandable?’ 

I hope you can now see what difference I wanted to address. From above, you can see,both functions and observables are lazy. We need to call (functions) or subscribe (observables) to get the results.

Subscriptions to observables are quite similar to calling a function. But where observables are different is in their ability to return multiplevalues called streams (a stream is a sequence of data over time).

Observables not only able to return a value synchronously, but also asynchronously.

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) output : ‘Hi Observable’ ‘Am I understandable?’ Yes, somehow understandable!’. 

In short, you can say observables are simply a function that are able to give multiple values over time, either synchronously or asynchronously.

You now have an outline about observables. But let’s understand them more by looking into different phases of observables.

Observable Phases

We have already seen from the above example how observables create and execute and come into play by subscription. Hence, there are four stages through which observables pass. They are:

  1. Creation
  2. Subscription.
  3. Execution
  4. Destruction.

Creation of an observableis done using a createfunction.

var observable = Rx.Observable.create((observer: any) =>{ }) 

To make an observablework, we have to subscribe it. This can be done using the subscribe method.

observable.subscribe((data)=>{ console.log(data); })

Execution of observables is what is inside of the create block. Let me illustrate with the help of an example:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) 

The above code inside the create function is observable execution. The three types of values that an observable can deliver to the subscriber are:

observer.next(‘hii’);//this can be multiple (more than one) observer.error(‘error occurs’) // this call whenever any error occus. Observer.complete(‘completion of delivery of all values’) // this tells the subscriptions to observable is completed. No delivery is going to take place after this statement.

Let’s have a look below to understand all three values:

var observable = Rx.Observable.create((observer: any) =>{ try { observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); observer.complete(); observer.next(‘lAST DELIVERY?’ ); // above block is not going to execute as completion notification is already sent. } catch(err){ observer.error(err); } }) 

Last phase that comes into the market is destruction. After an error or a complete notification, the observable is automatically unsubscribed. But there are cases where we have to manually unsubscribe it. To manually do this task, just use:

var subscription = observable.subscribe(x => console.log(x)); // Later: subscription.unsubscribe();

This is all about the different phases through which an observable passes.

I think, now, we know what observables are? But what about the other question which is - how observables are different from promises? Let’s find the answer to it.

Promises vs observables

As we know, promises are for handling async requests and observables can also do the same. But where do they differ?

Observables are lazy whereas promises are not

This is pretty self-explanatory: observables are lazy, that is we have to subscribe observables to get the results. In the case of promises, they execute immediately.

Observables handle multiple values unlike promises

Promises can only provide a single value whereas observables can give you multiple values.

Observables are cancelable

You can cancel observables by unsubscribing it using the unsubscribe method whereas promises don’t have such a feature.

Observables provide many operators

There are many operators like map, forEach, filter etc. Observables provide these whereas promises does not have any operators in their bucket.

These are features that makes observables different from promises.

Now, it's time to end. I hope you have a better understanding of the hot topic of observables!

Thanks for reading!