Observables / Promise in Angular

Before going to learn about observables/promise we need to know about Synchronous vs. Asynchronous

• In the Synchronous process, multiple tasks are executed one after another, which means the second task is waiting to complete the first task. In that case, the thread needs to wait before moving to another task.

• Another side, in the asynchronous process, there are multiple processes executed simultaneously. It will not wait for the complete previous task. It will just move to the next task and start the execution.

Observable is a class to run unit of code asynchronously and provides data
to callback function.
Asynchronous communication allows performing more than one task parallelly
Callback functions can be registered with Observable using subscribe method
Note: It can be synchronous or asynchronous.
Syntax:
<observableobject>.subscribe(
(posres)=>{ callback function to receive positive response[data] },
(errres)=>{ callback function to receive error response },
() => { callback function for on completion of method exec }
);

Observable class constructor requires parameter as inner function with observer,
observer will receive addressof callback function , this callback function will be
called using following methods.
1.next(posdata)--it will call positive response callback function
2.error(errinfo)--it will call error response callback function
3.complete() --it will call on completion callback function.

*Observable class comes with rxjs package
*Once we got required data from observable, it is recommended to unsubscribe to
observable to release internal memory resources


Promise

Promise is a class to run unit of code asynchronously by calling callback function.
Callback functions can be registered with promise using "then" [like subscribe] method
Syntax:
let <promise var>=new Promise((resolve, reject)=>{
unit of code for async exec
resolve(post response); //similar to observer.next(-)
or
reject(error response); //similar to observer.error(-)
});

Syntax to register callback function
<promisevar>.then(
(posres)=>{
..
},
(errres)=>{
...
});

Observable Vs. Promise D/w

Observable can emit data more than one time[i.e observer.next can be used
any number of times]
Promise can emit data only once[i.e. resolve can be used only single time]


Observable can be synchronous or asynchronous.
Promises are asynchronous.

Observable will allow cancellation[i.e unsubscribing]

Promises doesn't allow cancellation[i.e unsubscribing]



Observables are lazy when we subscribe then only that will execute.

Promises are not lazy; they will execute immediately on creation.


Example

Install this node package first, 
npm install --save rxjs


Example


import { Observable } from 'rxjs'
var observable = new Observable(res => {
    res.next("Hello Uday");
    res.next("Hello Kittu");
    res.next("Hello Abc");
});
observable.subscribe(console.log)
//Output --> Observable can emmit multiple values
//Hello Uday
//Hello Kittu
//Hello Abc
var promise = new Promise(res => {
    res("Hello Uday");
    res("Hello Kittu");
    res("Hello Abc");
});
promise.then(console.log)


Output



























Lazy load 



import { Observable } from 'rxjs'
var observable = new Observable(res => {
    res.next("Hello Uday");
    res.next("Hello Kittu");
    res.next("Hello Abc");
});
observable.subscribe(console.log)
//Output --> Observable whenever subscribe then only it emit values, it is lazy loading
//Hello Uday
//Hello Kittu
//Hello Abc
var promise = new Promise(res => {
    console.log("Promise executing");
    res("Hello Uday");
    res("Hello Kittu");
    res("Hello Abc");
});
//Calling promise
promise.then(console.log)


Output










Asynchronous Promise Vs. Synchronous/Asynchronous Observable


//Async Promise
var promise = new Promise(res => {
    console.log("Start Executing...");
    res("Hello...");
    console.log("Execution End...");
});
promise.then(console.log)


Output










import { Observable } from "rxjs/internal/Observable";
//Async Observable
var observable = new Observable(res => {
    console.log("Start Executing...");
    setTimeout(() => {
        res.next("Hello Uday");
        res.next("Hello Kittu");
        res.next("Hello Abc");
    }), 1000
    console.log("Execution End...");
});
observable.subscribe(console.log)


Output













Observables (Sync)



import { Observable } from "rxjs/internal/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