Angular Interview Questions - Promise Vs Observable - With Practical Demo

foreign [Music] programming today from angular interview question series we are going to learn about promise versus observable first we will see the differences in between promise and observable and then after that we will see all those differences in the Practical demonstration so let's start promises and observable promises and observable both are used to handle asynchronous JavaScript request now we will see the differences in between both of them so first difference is promise is a part of native JavaScript on the other side observable is part of rxgs library that is also known as a reactive extension of JavaScript promise is having to call back one is the resolve and another one is a reject resolution result is the succession and reject is the failure one however observable is having three callbacks success error and complete promises are eager loading it means it's getting loaded once it's created on the other side observable are lazy loading they are not getting called until now unless it's not getting subscribed promises return always single value using next on the other side observable returns multiple value using subscribe over period of the time promises are non-cancelable on the other side observable can be canceled and unsubscribed promises always behave as a asynchronous however our observable behaves asynchronous and synchronous both promises don't support any operators on the other side observable supports operation like map filter reduce retry Replay for each and many more before it's getting subscribed okay now we will see all those differences in the Practical demonstration and then after that more clear so now let's flip to the visual studio so friends here I have created a simple application in this application I have created a component promise observable component and on its HTML file I have created a container inside the container I have taken the three button one is for creation one is for execution and another for the cancellation so in this creation I'll create a promise and observable and then I'll execute it and then I'll cancel it Kim so now let me run this application NG serve iPhone is basically used to run the application in the browser so it's going to open directly in the browser itself so it's serving my application now yep see it's automatically opened in the browser now if you see here I have created application in this application going forward what I'll do I'll put all my concept over here so it will be at the centralized location and you guys can access it okay and here I have created a promise observable component for this so if you see here here I have a taken a button creation and another for the execution and another one for the cancellation and we will see all the differences over here in the promise and observable one by one okay so now let me move to the its TS file so here if you see I have created a method as a creation execution and cancellation so in the creation let me create a promise so now here I am going to create a promise let me create a variable for promise new promise promise is a part of um JavaScript only so we don't have to use any library for this and promise always take two parameters one if you see here one is resolve and another one is the reject okay so we will pass the resolve and reject callback function here and these two callbacks functions is going to be inside the fat Arrow function this is known as a fat Arrow function and now here I'll just log promise created okay so here my promise has been created now I'll create a observable so here I'll just put observable and I'll create a observable and this we will pass one callback function as an observer and here we will block the value as a observable created okay so now if you see this promise is already there okay we have not added any library for this so this is the part of JavaScript and which is being included in the angular as well but if you see the observable is not part of JavaScript and it's not part of angular itself right so this is not the module is not being added over here so we have to add the additional module that that is known as the rxgs library okay this observable is part of rxgs Library so I'm just going to add the rxjs okay so if you see I have to add the additional module for the observable that is a rxjs so my first difference is that promise is part of JavaScript and observable is part of rxgs library okay and the second one promise take the Callback as a resolve and reject where observable take the Callback as a success error and complete okay so this Observer is having three callback function okay success error and complete so we are going to implement it now I am going to create callback function from promise and observable both okay so now here promise Limited value okay and we will see the reject also promise error now we will implement the Callback function for observable okay so this Observer is having three callback function first one is next where we are having the value observable emitted value now observable error observable error Observer dot complete okay so complete is not taking any parameter so you can see here this complete is not having any parameter as well as return type word okay so now we have implemented the Callback function for promise and observable promise is having resolved and reject and observable is having next error and complete callback functions okay now let me format the code in order to form it we have to use the control KF now let me run this application so this is already running now I am going to click on creation button if I click on creation button if you see here promise created okay we have not executed the promise as of now we have just created the promise however it's getting called okay so this is so what what does it mean promise are eager okay it's loaded whenever it's we are declaring it okay if you see the other side observable is not called it okay because it's observable are lazy okay and they are not loading while it's creation once we are subscribing it once we are executing it then after that observable is going to call okay so now if you see that the second difference is callback promise take the Callback as a result and reject and similarly in the observable we have a callback success error and complete and the third one promise is eager loading if you see here this is eagerly loaded we have not executed it as of now just we have created and other side observable is lazy loading okay so now we will execute it okay in the execution we have the promise here so this scope promise and observable scope will be inside this function itself so now let me declare this promise variable at the class level here promise equal to promise is type of promise and inside that it's taking a string and now we will same we will do for the observable observable is a type of string now we can remove this now we are taking this promise and observable from the class level so we have to be used as a this dot promise and here we have to use the this dot observable okay now this promise and observable can use in this function okay so now this dot promise dot then okay so whenever we are returning the value from the promise we have to use then okay and then inside that we have to pass the fat Arrow function data I'm simply logging the data here and similarly we will execute for the observable as well okay so this dot observable dot subscribe okay so in the Subscribe we have three callback function next we are passing the data from here fat Arrow function console.log we can pass the data here okay now the second one error and third one we have complete okay we are not having any parameter for the complete observable completed okay so now here on the execution we are calling the promise as well as we are executing the observable both okay now let me go back to my my application so first of all I am going to create my promise and observable so I have created my promise and observable now I am going to execute it so if you see here observable created now once I'm subscribing it then it's going to create the observable okay and observable imitate the value so let's flip to the visual studio so here we have reject and error method is being called without any condition so we will put some condition over here const each error we will put some static value as a false if is error then after that it's going to be called as a error callback okay in the same way we will do it for reject okay now let me go back to my application so here I'll create my promise and execute it so now if you see here my promise created and my promise emitted the value and observable created observable imitate the value and observable completed okay so here this promise takes the two callback function as a result and reject on the other side observable takes three callback function as a success error and complete okay and if you see here let me refresh it as soon as I clicked on creation my promise gets created okay we have not executed my promise okay just we have created our promise and while creation it's getting executed and similarly we had created our observable but that is not created it okay it's getting created once we are going to subscribe it okay that's a that's the reason we say as a promise is a eager loading eager in nature and our observable is lazy loading in nature okay now we will see our fourth difference as a return single value using next and object observable return multiple value using subscribe over period of time let's flip to the visual studio so now here I'll use the set time interval set travel function set interval set timeout both are the JavaScript function which which are used to achieve the asynchronous functionality in JavaScript okay JavaScript is a synchronous programming language but can be asynchronous using our asynchronous functions as a set interval or say time okay so here I am using set interval and I am passing a callback function here and I'm putting a timer over here as a 1000 milliseconds okay and now I am going to emit the value inside the our set interval function and I'll emit one more value here value 1 and value just to differentiate okay and the similarly we are going to use here set time interval inside the observable as well okay and we are going to use the timer as a 1000 millisecond which is equal to one seconds okay now here this returning value okay next so here I am returning value one Yep this is also this so we have to just show this this is uh being called over period of time which is which is returning a stream of data okay now let me go back to my application so here I'm just creating my promise and observable and then I'm executing it if you see here my observable completed okay my observable bucket is completed here okay so in order to show that I'm just going to because this code is going to go to getting executed before execution of this code okay so I have just commented this now let's go back to my application here I have created my promise and observable and then I'm started execution okay so if you see here clearly promise created and promise emitted value so here promise is emitting only one value okay so see here I have returned two values but I have get it only one okay so however in the observable if you see we have we are getting the value over period of time okay after one second it's emitting the value so it it Returns the stream of data okay so if you see here my observable as continuous emitting so here we have a provision to cancel this observable okay so now let me show you how we can cancel this or unsubscribe let me go back to my visual studio here I'll create a subscription I'll put a dollar sign as a suffix then I'll put take it as a subscription now this subscription whenever we are subscribing any observable returning a subscription okay so this dot subscription equal to so now we have our subscription now inside our cancellation method this dot subscription dot unsubscribe okay very easy isn't it now let me format the code control a control k f okay so now my code is formatted so now let me go back to the application so here I have created my promise then executed my promise and observable if you see my observable are continuous emitting the value so now if I click on the cancel then my observable is getting canceled okay it's not getting executed further but if you see my promise got emitted the value we cannot cancel that promise okay we can cancel that observable but we cannot cancel the promise so in order to show that let me just execute this code inside our set timeout function and I'll give the here 5000 milliseconds and I'll execute this over here okay and similarly timeout and I'll give the 0 milliseconds over here I want to execute this immediately okay I am putting as a zero deliberately because I want to execute this immediately and I want to execute it after some time so I can show you that this cannot be canceled okay so now let me save it and let me go back to the application here I have created my promise and observable then I have executed and immediately I am going to cancel it okay so if you see here is still my promise emitted the value okay however I have canceled it after five seconds it emitted the value okay and up and my observable are getting canceled okay now see the difference is promise are always asynchronous however observable perhaps asynchronous and synchronous both so if you see here promise are getting created and then promise are emitting the value in the last okay but however Observer created an observable emitted the value so now here my observable is getting we have as a synchronous okay and Promises be having as a asynchronous now go back to the application here I will call this function after two seconds and I'll call inside the set timeout I'm going to make this subscription as a asynchronous so I I'll be calling both of the function after two seconds okay let me go back to the application creating executing now you'll see my promise created promise emitted okay then observable created and observable emitted the value okay so now my promise and observer my observable are be having as a synchronous on the other side promise are always a synchronous in nature okay if you are not able to understand that why I am saying synchronous and asynchronous handling here just comment me I'll make another video on that where I'll explain that how event Loop event queue and how worker threads are working together in order to achieve the AC synchronous functionality in Chrome V8 engine okay now let's move to the another difference promise do not provide any operators okay on the other hand observable provide operators like map filter reduce retry Replay for each and many more okay here I'll show you how to use the map and filter operators in observable now let's flip to the visual studio so in order to demonstrate that I have created a serviceium backend service inside this backend service I am calling this URL I have created a backend API if you see this and I have already deployed this API in my localhost so this is the user detail that we are getting from the web API okay so I'm calling this API from my backend services and here I am returning as observable get user list okay so when you are calling any Services okay services are returning and observable okay they are they are returning observable or promises okay so here for the observable I have just returned the observable from the HTTP get request and from the promise I have called this get request for the this particular URL and then I have converted to it to a promise and I've returned it a promise from here now let me inject this backend service in my component so here I'll come to the Constructor drive it backend service type of backend service let me import this backend service here now here I have my backend service so here I'll just comment this code okay and I'll call the promise from the backend service this dot promise equal to this dot backend service dot get promise user list okay so now this is going to return the promise similarly I am going to call for the observable as well okay so I'll just comment this complete observable code okay and here I'll call this dot observable equal to this dot backend service Dot get observable user list okay so from here I am getting the observable and here I am getting the promise okay so now here let me move this code out from the set timeout okay I'll move this down and let me move this out from this one as well okay let me move this code down okay so now here we are calling our promises and here I am calling my observable okay now let me see in the application if we are getting the user list or not in both of the cases so now creation and execution so if you see here this is the result that we are getting from the promise and this is the result that we are getting from the observable and after returning the result my observable got completed okay now let's go back to the visual studio code so here in promise we don't have any option to write a filter okay to write apply your any operator here okay but in case of observable we have so what we have to do before subscribe I'll write a code for pi okay in order to apply the operator we have to use the pipe and inside pipe I am going to use first map operator and inside the map operator I'm going to pass a parameter callback function for users that would be a callback function so if you see here my map is not added so far so I'll just add this map function from rxjs now here we have to use now from this user that we have passed you just Dot filter and what we have to filter over here so inside the filter function we have to pass the parameter as a user which would be type of any and then fat Arrow function and here we have to write the condition which user that we want to filter it out right so user dot ID okay user.id is greater than 5 okay so here we have the observable we are using the operator map operator and filter Operator by using the pipe so inside the pipe you have to use the operator so we have created a pipe and we are using this map we are passing the entire user inside that entire users we are filtering that a specific user which are having the user ID equal to greater than 5 okay so I hope this will be working let me see to the application now create and execute so we are getting here result as a undefined so now let me see what is the mistake we have here so here we are using a user filter so let me use the directly user filter here and this user filter user and user.id is greater than equal to five okay so basically here we have to use the return which should return the users okay because we are filtering it right so now this should be working and after that once it's got filtered and then after that we are subscribing the value okay so now let me see once again in our application we did refresh yep so if you see here this is all the result that we are getting from the promise and now here we got the result as a six seven eight nine ten all IDs are greater than five okay so here we are using so here observable supports for The Operators before the values are getting subscribed okay so we can apply the filters and we can filter all those things and then after that we can subscribe the value so this is all the differences that we have in promise and observable I'll make a separate video to differentiate in between synchronous and asynchronous request and I hope you understand that differences in between promise and observable so friends if you have learned then please don't go without subscribing it you reach and every subscription gives a lot of motivation to me so if you have not subscribed this Channel Please Subscribe it and don't forget to press the Bell icon so you can get the notification of all of my upcoming videos that's all for the day have a good day bye foreign [Music]

Channel: Kumar Programming

Views: 6,245

Keywords: programming kumar, angular, interview question, kumar programmer, computer science, angular interview question, advance angular, learn angular, kyprogramming, advance interview angular question, latest interview question, @kyprogramming, latest angular, javascript, nodejs, node.js, programming, code, download, how to, difference between, database, technical, technology, web development, sql server, jquery, best practices, easy, learn, english, hindi, explain, coding, kumar, with example, best, top, ng

Id: Wz8X4YBrMoI

Length: 25min 18sec (1518 seconds)

Published: Mon May 29 2023