Pengenalan kepada Yang Dapat Diperhatikan dan bagaimana ia berbeza dengan janji

' Observables ', ' Observables ', ' Observables ' ... Ya! Hari ini, kita akan membincangkan mengenai perkataan pasar yang sering dibincangkan ini. Kami juga akan mengetahui bagaimana mereka berbeza dengan Janji (belum pernah mendengar tentang Janji? Tidak perlu risau! Anda akan mengetahui lebih lanjut tidak lama lagi). Mari mulakan!

Saya pertama kali menemui istilah Observable ketika saya mula belajar Angular. Walaupun ia bukan ciri khusus Angular, ini adalah cara baru untuk menanganitidak segerakpermintaan. Permintaan penyegerakan? Anda tahu, bukan? Tidak! Tidak mengapa. Mari kita fahami terlebih dahulu apa permintaan async .

Permintaan Async

Baiklah! Anda pasti pernah membaca mengenai ciri tak segerak di dunia JavaScript. ' Asynchrony ' dalam dunia komputer bermaksud aliran program berlaku secara bebas. Ia tidak menunggu tugas selesai. Ia beralih ke tugas seterusnya.

Sekarang, anda mungkin berfikir - apa yang berlaku dengan tugas yang belum selesai? Rakan sekerja mengendalikan tugas yang belum selesai. Ya! Di latar belakang, rakan sekerja bekerja dan menangani tugas-tugas yang belum selesai dan setelah selesai, ia akan menghantar data kembali.

Ini dapat menimbulkan persoalan lain tentang bagaimana kita menangani data yang dikembalikan. Jawapannya ialah Janji , Dapat Diperhatikan , panggilan balik dan banyak lagi.

Kami tahu bahawa operasi tak segerak ini memberikan tindak balas, sama ada beberapa data setelah berjaya atau kesilapan. Untuk menangani hal ini, konsep seperti Janji , panggilan balik , keterlihatan masuk ke pasaran. Baiklah! Saya tidak akan menerimanya sekarang kerana kita telah menyimpang dari sub topik kita iaitu permintaan ' async '. (Jangan risau! Topik ini akan dibincangkan tidak lama lagi).

Setelah membincangkan perkara di atas, anda mungkin mendapat gambaran kasar mengenai permintaan asinkron . Mari bersihkan. An Async permintaan adalah salah satu di mana pelanggan tidak menunggu jawapan. Tidak ada yang disekat. Mari fahami konsep ini dengan melihat senario yang sangat biasa.

Di dunia web, adalah biasa untuk memukul pelayan untuk mendapatkan data seperti perincian pengguna, senarai dan sebagainya. Kami tahu ia akan memakan masa dan apa sahaja boleh berlaku (kejayaan / kegagalan).

kes ini, bukannya menunggu data datang, kami menanganinya secara tidak serentak (tidak menunggu) agar aplikasi kami tidak tersekat. Permintaan sedemikian adalah permintaan tidak segerak. Saya rasa sekarang kita jelas dengannya. Oleh itu, mari kita lihat bagaimana kita benar-benar dapat menangani permintaan asinkron ini.

Seperti yang telah saya maklumkan kepada anda, Observables memberi kami cara baru untuk menangani permintaan asinkron. Cara lain adalah janji, panggilan balik, dan penyegerakan / menunggu. Ini adalah kaedah yang popular. Mari kita lihat dua daripadanya iaitu panggilan balik dan janji.

Panggilan balik

Panggilan balik adalah perkara biasa. Fungsi panggilan balik (seperti namanya) dipanggil di bahagian belakang. Ketika permintaan selesai dan mengembalikan data atau kesalahan, fungsi-fungsi ini dipanggil. Lihat kod 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 berlaku ketika kita ingin meminta lagi kepada pelayan data setelah kejayaan permintaan pertama? Bagaimana jika kita ingin membuat permintaan ketiga setelah permintaan kedua yang berjaya? Mengerikan!

Pada ketika ini, kod kami akan menjadi tidak kemas dan tidak mudah dibaca. Ini dipanggil ' callback hell '. Untuk mengatasinya, janji muncul. Mereka menawarkan cara yang lebih baik untuk menangani permintaan async yang meningkatkan keterbacaan kod. Mari kita fahami sedikit lagi.

Janji

Janji adalah objek yang menjanjikan ia akan bernilai dalam masa terdekat - sama ada kejayaan atau kegagalan. Janji mempunyai kaedah tersendiri iaitukemudian dan tangkap . .then () dipanggil apabila kejayaan datang, jika tidak kaedah memanggil () memanggil.  Janjidicipta menggunakan pembina janji . Lihat kod 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 bahawa ia akan mempunyai beberapa nilai dalam masa terdekat. .then () atau .catch () dipanggil mengikut status janji.

Janji meningkatkan kebolehbacaan kod . Anda dapat melihat bagaimana kodnya dapat dibaca dengan menggunakan janji. Pengendalian operasi async yang lebih baik dapat dicapai dengan menggunakan janji. Ini adalah pengenalan ringkas mengenai janji-janji itu, bagaimana mereka mengendalikan data dan janji-janji kecantikan yang dibawa.

Sekarang, sudah tiba masanya untuk mengetahui topik utama kami: Dapat dilihat.

Apa yang Boleh Diperhatikan?

Yang dapat dilihat juga seperti panggilan balik dan janji - yang bertanggungjawab menangani permintaan asinkron. Yang dapat dilihat adalah sebahagian daripada perpustakaan RXJS . Perpustakaan ini memperkenalkan Observables.

Sebelum memahami apa sebenarnya yang dapat dilihat, anda mesti memahami dua model komunikasi: tarik dan tolak . Kedua konsep ini adalah protokol bagaimana pengeluar data berkomunikasi dengan pengguna data.

Model Tarik & Tolak

Seperti yang telah saya katakan, Push and Pull adalah protokol komunikasi antara pengeluar data dan pengguna. Mari kita fahami kedua-duanya satu persatu.

Model Tarik: Dalam model ini, pengguna data adalah raja . Ini bermaksud bahawa pengguna data menentukan bila mahu data dari pengeluar. Pengeluar tidak memutuskan bila data akan dihantar. Anda dapat memahami dengan lebih baik jika anda mengaitkan fungsi dengannya.

Seperti yang kita ketahui, fungsi bertanggungjawab untuk melakukan beberapa tugas. Sebagai contoh, dataProducer adalah fungsi yang hanya mengembalikan rentetan, seperti " Hi Observable ".

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

Sekarang, anda dapat melihat bahawa fungsi di atas tidak akan menentukan kapan ia akan memberikan rentetan 'Hi Observable'. Ia akan memutuskan oleh pengguna, iaitu kod yang memanggil fungsi ini. Pengguna adalah raja. Alasan mengapa ia dipanggil model tarikan adalah bahawa tugas tarik menentukan komunikasi. Ini adalahyangtarik Model . Sekarang, mari masuk ke Model Push .

Model Push: Dalam model ini, pengeluar data adalah raja . Pengeluar menentukan masa untuk menghantar data kepada pengguna. Pengguna tidak tahu bila data akan datang. Mari fahami dengan mengambil contoh:

Saya harap anda ingat janji . Ya, Janji mengikuti model push .  Janji (pengeluar) menyampaikan data kepada panggilan balik ( . Kemudian () - pengguna). Panggilan balik tidak tahu bila data akan datang. Di sini, janji (pengeluar) adalah raja. Ini menentukan komunikasi. Itulah sebabnya ia dipanggil Push Model kerana pengeluarnya bertanggungjawab.

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!