Вступ до Observables та те, чим вони відрізняються від обіцянок

' Спостережувані ', ' Спостережувані ', ' Спостережувані ' ... Так! Сьогодні ми поговоримо про це часто обговорюване слово ринку. Ми також дізнаємось, чим вони відрізняються від Promises (ви не чули про Promises? Не хвилюйтесь! Скоро ви дізнаєтесь більше). Давайте розпочнемо!

Я вперше зіткнувся з терміном Observable, коли почав вивчати Angular. Хоча це не специфічна для Angular особливість, це новий спосіб обробкиасинхроннийзапитів. Запит на асинхронізацію? Ви це знаєте, так? Немає! Нічого страшного. Давайте спочатку зрозуміємо, що таке асинхронний запит.

Запити на асинхронізацію

Ну! Ви, мабуть, читали про асинхронні функції у світі JavaScript. " Асинхронність " у комп'ютерному світі означає, що потік програми відбувається незалежно. Це не чекає завершення завдання. Він переходить до наступного завдання.

Тепер ви можете подумати - що відбувається з незавершеним завданням? Співробітник вирішує ці незавершені завдання. Так! У фоновому режимі колега працює та обробляє ці незавершені завдання, а після їх виконання він надсилає дані назад.

Це може постати ще одним питанням про те, як ми обробляємо дані, що повертаються. Відповідь - обіцянки , спостережувані , зворотні дзвінки та багато іншого.

Ми знаємо, що ці асинхронні операції повертають відповіді або на деякі дані після успіху, або на помилку. Щоб впоратися з цим, на ринок з’явилися такі концепції, як Promises , callback , спостережувані . Ну! Я не буду в них зараз вникати, оскільки ми відступили від нашої підтеми, тобто запиту " асинхронізація ". (Не хвилюйтеся! Ці теми незабаром будуть обговорюватися).

Після обговорення вищезазначених пунктів, ви могли б отримати приблизне уявлення про те, що таке запит на асинхронізацію . Давайте це прояснимо. Асинхронний запит один , коли клієнт не очікує відповіді. Нічого не заблоковано. Давайте зрозуміємо це поняття, розглянувши дуже поширений сценарій.

У світі Інтернету досить часто потрапляння на сервер отримує дані, такі як дані користувача, список тощо. Ми знаємо, що це займе час, і все, що може слідувати (успіх / невдача).

у цьому випадку, замість того, щоб чекати отримання даних, ми обробляємо їх асинхронно (без очікування), щоб наш додаток не блокувався. Такі запити є асинхронними запитами. Думаю, зараз ми це зрозуміли. Тож давайте подивимося, як ми насправді можемо обробляти ці асинхронні запити.

Як я вже вам говорив, Observables запропонували нам новий спосіб обробки асинхронних запитів. Інші способи - це обіцянки, зворотні дзвінки та асинхронізація / очікування. Це популярні способи. Давайте подивимось на два з них, які є зворотними дзвінками та обіцянками.

Зворотні дзвінки

Зворотні дзвінки досить поширені. Функції зворотного дзвінка (як випливає з назви) викликаються ззаду. Тобто, коли запит виконується і повертає дані або помилку, ці функції викликаються. Подивіться на код для кращого розуміння:

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

Це один із способів обробки асинхронного запиту. Але що відбувається, коли ми хочемо знову надіслати запит на сервер про дані після успіху першого запиту? Що робити, якщо ми хочемо зробити третій запит після того успішного другого запиту? Жахливо!

На цьому етапі наш код стане безладним і менш читабельним. Це називається " пеклом зворотного виклику ". Щоб подолати це, з’явилися обіцянки. Вони пропонують кращий спосіб обробки асинхронного запиту, що покращує читабельність коду. Давайте розберемось трохи більше.

Обіцянки

Обіцянки - це об’єкти, які обіцяють, що найближчим часом вони матимуть цінність - або успіх, або невдача. Обіцянки мають свої власні методито і ловити . .then () викликається, коли приходить успіх, інакше викликається метод catch () .  Обіцянкистворюються за допомогою конструктора обіцянок . Погляньте на код, щоб краще зрозуміти.

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’ })

Як бачите, myAsyncFunction насправді обіцяє, що найближчим часом він матиме певне значення. . then () або .catch () викликається відповідно до статусу обіцянки.

Обіцянки покращують читабельність коду . Ви можете побачити, наскільки читабельним є код, використовуючи обіцянки. Кращої обробки асинхронних операцій можна досягти за допомогою Promises. Це короткий вступ до того, що таке обіцянки, як вони обробляють дані та що несуть обіцянки краси.

Тепер настав час дізнатись про нашу головну тему: Спостережувані.

Що таке спостережувані?

Спостережувані - це також зворотні дзвінки та обіцянки, які відповідають за обробку асинхронних запитів. Спостережувані є частиною бібліотеки RXJS . Ця бібліотека представила Observables.

Перш ніж зрозуміти, що насправді є спостережуваним, ви повинні зрозуміти дві моделі спілкування: тягнути та штовхати . Ці дві концепції є протоколами того, як виробники даних спілкуються зі споживачами даних.

Модель Pull & Push

Як я вже говорив вам, Push і Pull - це протоколи зв'язку між виробниками даних та споживачами. Давайте розберемося по одному.

Pull Model: У цій моделі споживачем даних є король . Це означає, що споживач даних визначає, коли йому потрібні дані від виробника. Виробник не вирішує, коли дані будуть доставлені. Ви можете краще зрозуміти, якщо пов’язати з ним функції .

Як ми знаємо, функції виконують певні завдання. Наприклад, dataProducer - це функція, яка просто повертає рядок, наприклад " Привіт спостерігається ".

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

Тепер ви можете бачити, що вищевказана функція не вирішить, коли вона буде доставляти рядок "Hi Observable". Це вирішить споживач, тобто код, який викликає цю функцію. Споживач - це цар. Причиною, чому її називають моделлю витягування, є те, що завдання витягування - це визначення зв'язку. Цеtheвитягнути модель . Тепер, давайте йти в Пуш моделі .

Push-модель: У цій моделі виробником даних є король . Виробник визначає, коли надсилати дані споживачу. Споживач не знає, коли будуть надходити дані. Давайте зрозуміємо це, взявши приклад:

Сподіваюся, ви пам’ятаєте обіцянки . Так, обіцянки дотримуються моделі push .  Проміс (виробник) доставляє дані до зворотного виклику ( .then () - споживач). Зворотні дзвінки не знають, коли надійдуть дані. Тут обіцянка (продюсер) є королем. Це визначає спілкування. Ось чому вона називається Push Model, оскільки відповідає продюсер.

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!