Angular | RxJS 7 - toPromise() Deprecation

hello guys um in today's video i'll be talking about the deprecation of two promise in rx gs7 um so this this is how the video will go uh we will first review how we used uh the two promise how it works and then we will discuss why they duplicated it and then we'll be talking about the new replacement of the two promise and whether i like it or not and then uh we'll have few practical examples to understand this new alternative and after that we will be handling some errors that might happen with this new alternative so first of all let's have a quick example on how the two promise function works so i've got like an upper running angular project um so all we need to do right now is like to create a new observable so let's do that in a function i will call it git to do's function right and here we go it only emits one value which is to do one and then it completes okay so um if if we're not using the two promise conversion we just subscribe to that and get that value right from the observable by doing so um so let's save that and see what happens in the browser we just need to call that function and here we get um our to-do so um what people used to do uh to use the two promise instead of subscribing is simply doing so we declare a constant called value and then it equals the data observable dot to promise which apparently duplicated as you see here um and then we are waiting on it so this returns a um a promise that we can extract the value of it using the await right but we gotta you know add the sync notation here so after that we can like console sorry console log uh the value we got from that to promise conversion so i'll save that and see what happens and here we have it so this was sweet really like people loved it i loved it personally um you know the the syntax itself looks prettier and you know one line thing it's really sweet so this comes to the question hawaii they did duplicate it right so before i read that to you i i want to give you like a practical example to understand it better so let's get back here and let's make more valuables from that observable like let's add more to do's like to do two in three so now this observable doesn't emit one value it actually emits three values before it completes right so before we save that and run that code and see what happens yourself you could start wondering oh okay so which value i'm getting in the the two promise out of that you know conversion so this is one of the reasons actually you know you know the name itself of the function doesn't indicate which value are you getting of the multiple emits you know and that's one thing the other thing is uh not having the capability of selecting which value you need so if you know that this observable emits three values like so and maybe you want to select one of them right so this function function doesn't have that ability as well so these are basically two main reasons why they duplicated the two promise um before we move forward let's run that code and see what happens so we're getting the last value out of the observable before it completes right to do three here so this is how the two promise works it basically gives you the last value for the completion of the observable okay maybe you you need the first one or the last one what are you gonna do so that's the thing so they got a point actually and this is why i like the replacement so much so let's talk about that replacement okay so they give us two new functions to replace the old one which is the two promise they give us first value from and last value from the name itself is super you know self-explanatory so the first one gets the first value out of the observable and the second one gets the last value out of the observable right um let's try that out practically getting back here um you're maybe worried about losing this convenience of having the one line thing right conversion uh don't worry about that because the new function as well looks as convenient as the two promise first value from uh you just need to import that from the rxps library now we have it here and this is how sweet looks you know so let's run the code and see what happens now we're getting the to do one this time right but if we use last value from which needs to be imported as well and run that code now we're getting the last value so um you could say that the last value from function behaves the same as the two promised one because they both get the last value out of the observable so um this you know gives you an insight of the change that needed to you know needed to be done in in your system maybe you used to promise everywhere and um you got a big system that you need to introduce that a change to it so all you need to do actually is just you know replacing the two promise with the last value from and that's it i'm gonna try something different let's import http client yeah from angular common http and uh let's declare it here [Applause] all right we need some api to call to call it to get some data from so we can get some dummy json from the uh jsonplus holder thing let me just come here right yeah so on this dummy data you get from that link so we can use that url to get the data we need so we have to use url which equals to this um in real world we should put that in the environment right so instead of having the data as an observable like so we will create an http request [Applause] using the angular http client with the get request and just let you do is url and um the question you may ask which one i should use with http request so you know we used to do so we used to do data dot to promise and then we get the data out of that api in in in the value variable we need to uh replace that with a comma here yeah so we got the uh the data from the dom json api using the two promise conversion so if we move back to the new alternative last valley from as we said before it behaved the same as the two problems right so we still get the data what about using the first value from still the same right so what's going on here so um first value from and last value from basically behave the same if the observable that we're converting is only emitting one value so if you get get back here and only met on value so it doesn't really matter if you use first value from or last very from they both will pretty much return the same value which is to do one because it's the only value actually we're getting out of that observable let's try that yeah same value all right um i guess we like um practiced a little bit uh you know the two new alternatives of the two promise so now let's get to some error handling right now we're talking about their handling of the new alternative of the new replacement of the two promise so we've got you know three different of errors that we were talking about we've got the empty error which is um you know when your observable doesn't immediately did at all and completes before emitting any data and we also will be handling the null or undefined value it's basically not an error it's just a value but what if you don't want to give the user a null or undefined right you want to detect that and replace it with something else um and then we'll be talking about something different um you know if we have any different any kind of different errors other than the two above so let's get back to the to the code and uh you know produce some errors so let's commit comment that out now we have an observable that doesn't emit any data right it just completes and um you're using the last value from with that observable what's going to happen all right no elements in sequence you're getting an error okay so how to handle that um so last value from first value round gives you the literally of declaring a default value okay so let's say that in case you got no value you know i will return that default value let's say let's see if this works yeah we're getting the default value out of that because you know the observable we're listening to is not emitting any value so that's uh basically for the empty error moving on to the null undefined so if if the observable emits a value but that that value is simply undefined right unfortunately this will be um returned as value you know undefined but you don't want that right maybe you do maybe don't but if you don't want the undefined value or you want to take that and replace it whether it's undefined or not you can use this new operator of javascript and put some default value in here it should be the same of course but in order to differentiate let's add two yeah so we're getting the second default value which is here so this this operator to handle the null or undefined yeah so that that operator if you don't know it it's it's a little bit different than that operator because that operator will give you that default value even if it's like zero or false value basically but that one is only for the null or undefined not for the false not for the zero value um so this this is basically for the null undefined what about any other error that might happen like maybe this api returns an error so what should we do you should you know basically handle all the other errors the same way you handle any error with the async away right just by using try and catch uh like so so we get try okay we have an error here and and you do whatever you want to do with that error in here so this is how we handle all the other kind of errors that may happen with the last value from and first valuable from so um guys this is basically it for this video uh let me know if you like that new alternative of the two promise and you'll be using it um or do you have any concerns about it um do you still prefer the two promise so let me know that in comments and please subscribe to my channel because i will be uh uploading more videos about xgs and angular and i hope you like it so have a good day see ya

Channel: Tariq Saeed

Views: 526

Keywords: rxjs7, firstValueFrom(), lastValueFrom(), toPromise, Angular, toPromise() deprecation, toPromise deprecation

Id: 3aeK5SfWBSU

Length: 15min 13sec (913 seconds)

Published: Fri Sep 10 2021