Observables in angular |Responce , Error & Completion of Observable | Angular 15+
Javascript is single threaded language all code execute line by line ie if a http request sent to server all remaining code need to wait for responce and then remaining code execute
Async code execute in background & our main thread not got blocked
Promise:
request sent to server> service take some time to get data ie 100 users > and sent back responce
promise provide data when its completely ready, so we will get data or error object
OBSERVABLE: same as promise but its send the data in packets ,
observable send data only if its used by someone else not send
its not native its provided by rxjs library
1. make an observable
2. create a subscriiber if no subscriber observable not emit any data
home.component.js
import { Component } from '@angular/core';
import {Observable} from 'rxjs';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent {
constructor(){}
myObservable = new Observable((observer)=>{ //observer is subscriber wating for data
console.log("OBS Starts");
setTimeout(()=>observer.next("1"),1000) ;
setTimeout(()=>observer.next("2"),2000) ;
setTimeout(()=>observer.error(new Error("Sonething went wrong")),1000) ; //after one second error also generated + not responce other data
//setTimeout(()=>observer.complete(),2000) ; //once completed never return other data
setTimeout(()=>observer.next("3"),3000) ;
});
ngOnInit(){
this.myObservable.subscribe(
(val)=>{
console.log(val);
},
(err)=>{
console.log("error is here "+err.message);
},
()=>{
console.log("completed");
}
); //all parameters, next, error, complete are optional
}
}