Blazor Power Hour: WebAssembly and HTTP

it's time for the blazer power hour [Music] [Music] welcome to the blazer power hour introducing the blazer power hour no it's serious it's time hey friends it's time for the blazer power hour hello everybody and welcome to the blazer power hour [Music] you're checking out the blazer power hour welcome to the blazer power hour it's time for the blazer power hour are you ready are you set got everything all ready to go let's do it let's do the blazer power hour what a fantastic introduction gotta love all the folks that helped out with that from fierce kittens and jeff fritz and uh curious drive and jimmy ingstrom and of course steve sanderson and daniel roth what a great group um it is time for the blazer power hour uh so today what we're going to do is we're going to work on some http stuff so there's probably a lot of folks that are new to blazer and they're getting started with making http calls and there there's a lot of nuances to it so there's uh the basic demo where you see like the fetch data service and that kind of gets you off and running but it doesn't show you how to deal with errors or do any of that sort of stuff so we're gonna look a little bit deeper into uh http and how to do some of that in our applications today so we're gonna try to fit this in an hour this time we ran a little bit over the last show so let's get off and running with a brand new project let's do a blazer app um i'm still using visual studio this week uh next year i'll probably be switching over to a mix of visual studio visual studio code and rider to kind of give some examples of how to use blazer with different development technologies i've had a lot of little quirky issues with um with visual studio lately i think the last update which was pending download on the previous show has helped resolve a few issues with uh with it locking up and giving me some false positives we'll see today um how well it plays along i'm going to build a new web assembly application and i'm choosing the asp.net core hosted application model so we have a front end and a back end if we want to kind of explore some of the web api calls uh it's time to get blazered and uh that intro is fired thank you very much chris uh mr magus here thanks for joining me mr magoo it's always nice to have you here as my fact checker and uh reliable um compiler uh since the one in visual studio can be a little bit uh quirky uh mr magu probably catches compiler errors before rosalind does so that's always great to have you around injure coder welcome back nice to have you here as well um we're gonna ignore the server bits for now uh and i will get my zoom tool up here uh or not or i'll i'll misspell it if you're on windows and you do um like zoom calls and stuff where you need to do like weekly stand-ups zoom it is a great little tool you see me use it on the show all the time and that's the one i always forget to load up but i managed to get it up here at the last minute so zoom it just do a quick google search for it if you're on windows it is a great little tool it lets you do stuff like this so we're going to look at today uh the client side here i've grabbed the full stack version in case we want to keep an eye on the server side and see what web api calls the alert came up as css so we're still trying to figure out how to make um facebook and uh youtube play along so stream yard seems to cache some of the metadata somewhere and we're still trying to figure out why it's doing that but uh thanks for the heads up agent coder yeah that css was last week so it looks like you know maybe hang on a second hang on a second maybe it's not stream yard maybe it is twitch edit stream info oh yep there it is i got it i got it let's go ahead and fix that oh no that one's showing the right one too nope it's not that so that one says http went to change it and it's the right the right show so not sure um that was last week was css so somebody's got that cache somewhere all right so we're going to look at http when you do file new project in blazer it comes with a fetch data example that has an http service already injected in it so give me one sec here's a little dry in here today all right so we have hdtv injected here in fetch data and this one is going to show us how uh to load some data when the page initializes when it does we're going to populate this uh weather forecast array with weather forecasts and it's a waiting http and it's calling get from json async and it will automatically create an array of weather forecasts from whatever json data it pulls back from the weather forecast api so we can actually run this application oh you got your poster chris excellent so thanks for helping out the other day on the show providing all those links last week on the the uh the podcast we did on css that was a big help hopefully the poster's cool alice has got a stash of those they're supposed to be pretty neat um so we're calling this weather forecast api and if i pull this application up in the browser we can see this page here and the weather data is displayed in this html table we can also do this let's duplicate this tab and i'm going to put api slash weather forecasts in here let me make sure i got the right endpoint let's pull visual studio weather forecast with out the pluralization so let me pull the s off of there hit enter and nothing at that address uh let's try it without the api on there there we go so this is the raw data that's being pulled in from this endpoint so we have localhost slash weather forecast and it goes out to a web api endpoint and pulls this json data in and it automatically parses this data into a weather forecast array so we get that for free with this get from jason async method here so that's pretty simple there's not a whole lot we can discuss from that perspective but when you're using http while that zoom level is crazy let's get that backed off what this doesn't cover is what happens when this request fails so let's go ahead and make this fail let's pretend our service is down we can do that by just putting something in the url that doesn't belong there so it's going to go to a different endpoint that doesn't exist and it should fail so we're going to load that we're going to click fetch data and then boom we have an on handle unhandled exception has occurred you see that down here in the left hand corner an unhandled error has occurred and we can reload the page but since the wrong url is there it's just going to always show this loading message which is not a great ux chris i'll have to follow up with you man i've got um some frames that i bought on amazon that were really good i use for my uh rick and morty posters that i got from mcdonald's long story i have to tell that another time uh i liked them a lot and they were very inexpensive so when this gets back a bad request it immediately fails there's no json for this to even parse a matter of fact let's take a look if i didn't close the page yet let's see if we've got an error message here in the console and see what it says so the error message itself isn't even very helpful it says unhandled exception rendering component and it gives you a less than sign is an invalid start of the value for path line number position blah blah blah what is going on here is uh you can see the system.txt.json reader exception blank or not blank but less than is an invalid character start what does that mean exactly so let's go instead of going to fetch data let's go to um let's go to that web endpoint again so weather forecast should look like this okay it should be a string of json data that we're getting back that's what the application x is expecting uh does that error message show up only in the dev environment or does it look the same with production flags that's a great question i'm going to make an assumption that the full error message is hidden you're still going to have the yellow banner that's an exception but i believe that error message is hidden i uh it's something that we should probably look at later um let's look at some other stuff first we can get around all of this if we just handle those exceptions ourself rather than push that stuff out where it could potentially even show up on the client so what what our application expects is a json string an array of json data and what it's getting back instead is let's go in here it doesn't really matter what the url is i put in it's getting back literally this page so if we look at this page what is the first character in this page it is a less than sign because it is part of that doctype html tag so it's expecting this over here it's getting back this document in its entirety here so it tries to parse this full html page as something it expected to be an array of json data and when it does that it chokes because html page is obviously not a weather forecast array item and it can't parse it so it fails so we'll change that back what do we what do we do here we can wrap this in a try catch block that's probably one of the simplest things we could do i'll hit try double tab and we can do a try catch here so we could try to get our weather forecast and if it fails we can take the exception and catch it and instead of putting that sensitive data in the console as whip replacement has pointed out what we could do is we can catch that error we can do something with it and put a useful message on the screen to the user and hide away any sensitive data that might be there time bender 360 saw me uh throw that line of code around uh and ask how did i move that line up uh so i need to get the plugin that jeff fritz uses shows what keys i'm pressing if you hold alt on the keyboard and press the up and down arrows you can shift around a line of code that you're focused on in visual studio i think this works in visual studio code as well and you can even move entire code blocks if you have an entire block highlighted you can move that around so alt just holding alt and the keys will help you with that great question time bender uh ancient coder verified yes that works in visual studio code as well so it's a pretty universal hotkey works in a lot of places um just don't get in the habit of using it in something like microsoft word so i spend a lot of time in visual studio and then i go to write something in in word or an email and i'm like i want to move this paragraph around it doesn't work there wish it did it does not anyway uh so first step would be to catch an error like this so let's uh throw something very simple in here uh this this next bit goes uh is a dedication to my friend krista mars who is salt and burnham in the chat i'm going to use a little bootstrap for this i know it's your favorite thing my friend so we're going to set up a flag we'll set up a quick flag here it's a boolean flag and we'll say is fail and then we'll just leave that as is and up here where our table should appear we have if forecast is null um show loading else show a table inside of this and this is going to be a little spaghetti code i know there's better ways to do this but for now we're just going to smash it all in here we're going to say if we'll hit tab again is fail then i will put an alert here div class uh alert uh alert danger and we can put a custom message in here and just say failed to get http you'd want to put something user-friendly in here i'm just trying to show that we can put a message up if there's a failure this doesn't really tell us what our failure is but i'm going to use that trick again and move this to the bottom uh so if there's a failure we won't show our table we'll show that message instead and then we need to set the flag here so we'll say if there was an exception um we don't want to throw the exception back we just want to take it and throw it away and say is fail is true and what we probably want to do in here is we would want to log some exception info right we'd want to log that to wherever our logs go in our application so we can uh dan siegel's got the right uh message here um if it fails you suck at this uh should we set the flag to false on the try yeah so you would want to toggle this so that's a good point so if it's um if it's successful then we want to set that flag to false uh if it is true then we want to or sorry if there's an exception we want to set that to true and then we'll show our message let's go ahead and this is let's see this is a successful call here so we shouldn't see any change in our application other than it loads successfully the data let's go back now and throw this guy into a failure mode and again doesn't matter what we call there we're just going to pretend we're hitting something that doesn't exist or it's not returning the correct data and the await let's see there is a small problem here it has failed it should set that to true but why am i not getting let's see i'm still loading oh because the data somebody pointed this out and i just i glanced over it somebody in chat caught this um the value is still no uh null in um in this case because forecast still is null so forecast needs to be set um let's see if we can do this we'll just set it to an empty an empty array nope it does not like that so we'll do a new list of weather forecast and then call to array on it so we'll just throw an empty value out there there so we'll put an empty array out in the universe at least it won't be null anymore and that should be the response there so i i realized somebody pointed that out in retrospect that that was going to happen but i didn't quite catch it when it was put into chat there array.empty would also work apparently let's see coefficient says array.empty again there are better ways to do all this i'm just kind of showing the patterns um that you can you know the troubleshooting patterns you might go through here uh so there's this this would work but there's there's also another way to tackle this too ah yeah rosalind reminders will work um i don't know if they'll hit you in a razor file though so if we had this in a proper service we would probably see that razer the razer compiler is a little bit more relaxed than uh the full roslin compiler uh so you won't get those uh refactoring suggestions uh like uh empty array which is this is probably way more performant than creating a new list of uh and then changing it to an array anyhow um there are other ways to handle this uh possibly better ways to handle this so we might want to keep this in a try but i'm going to show something else here uh so right now we're making a call and we're using a lot of automated things here there there's a lot of magic happening inside of get from jason async now get from jason async as it implies here with uh this typed method call here it's going to return a weather forecast array so it's going to automatically parse that json data from the http request turn it into an array of weather forecasts and assign it to forecasts uh when we work with http uh we often work with status codes so how do we get a status code from this we can't actually get a status code directly from get from json async we have to change this call up a little bit so what i'm going to do is i'm going to comment this out for a second so we have this statement here let's change this around a little bit let's start with http so we have http uh we can call git async and what git async is gonna do is it's gonna give us back that full http call with all of its bits that we can analyze so we can call git async and then we need the url or the uri we call weather forecast and let's go ahead and set up a place to hold this information so we can say get response awaits get jason async now we have a full response that we can look at and what i mean by that is i can say response dot and look at all of the properties that we have now so we have status code content is success status code so that's a canned version of a shortcut version of this status code here we can look at the headers uh so we have headers the content and then there's some more additional um properties underneath of that as well uh there are reason codes and reason phrases request messages uh version numbers if the api is versioned etc so now what we can do in this scenario is let's take a look we can we can do something really simple we could say if on response dot is success code so this is going to check for a successful status code and if we zoom in come on don't don't fail me zoom in there we go get that nice and big on the screen for all of you watching uh when we say is success status code it returns true um if the response message is in the range of 200 to 300 right so if that status code is anywhere in the success range because there's a lot of uh sub messages in there like 200 is usually the basic uh this was a successful response um then it's going to um come back 200 there are some other nuanced ones in there and then otherwise it'll be false however um this is still going to potentially return a 200 and fail so the example i gave earlier even though it fails let's see what we get we'll go ahead and keep this here let's put a fail mode in let's double check my theory here let's see if we get a 200 back because the routing is going to take place and it's not going to find the web api endpoint so it may fail back into a six a default page which is still a successful api call so let's see what we get back if it's a success or if that response code is a success let's just go ahead and put this in to [Music] a message here let's go and put a string on we'll just write out that response code somewhere on the page how about that and uh let's take this if statement out for a second and let's just see what we get back so the response code we'll set that equal to response dot um status code and it it's not going to want to assign to a string so we'll go ahead and to string that like so and then great point by dan here if you're worried about getting the default page you can check the response type header so that you validate you got application.json and not a web page great tip dan um so let's see what we're going to get back um and then we can we can uh dive into dan's suggestion as well uh so there's another thing that we haven't done here yet and that is what the original code did was it actually set the forecast data so we still need to do that so forecasts equals um and and we have to await again so we're on this first call we're going to await the response so we're going to make the http call and await the response back from the server and wait for that to complete so the reason we have to await again is because we're going to take the response and we're going to await the parsing of the jason into a um serializing it into a weather forecast to do that uh we're going to say response.content uh read let's see we've got a um we've got read string async and then read from jason async this is going to match up to what we had before read from jason async so we know we're getting jason response back um and we want a weather forecast array here and now we've set that forecast uh in in as uh the response from the web api so we're still going to keep that failure mode in there just in case uh that fails let's see what our application does uh and we never wrote out that response code so let's do that real quick uh weather forecast let's throw an h2 in here and put out that response code up at the top and see if we get back let's run that again we'll do a little tab bankruptcy here get rid of those uh we'll call fetch data it came back as okay but we still have a failure mode here so again um the failure is not happening happening on the http call it's still a successful call but this this page defaults back to a successful application page so we can look at uh what dan said again dan said you can check the response type header and see if it was a json response so let's do that so again let's take a look at the response object here so headers um trying to think what is going where is that going to be found in here dan um and this is let's see http headers response headers is plural so this is going to be it's not it doesn't appear to be a list uh let's see what we get back actually headers is an array uh it looks like we've got contain accept ranges um let's see here yeah we can see that it's a collection here because we can come back as a queryable so we can see link is getting involved here it's a headers dash header name uh so uh time better says i don't think the catch block is firing um it did catch that and set this is true so the failure is happening here so let's double check this real quick headers header name uh it's not letting me use that code there let's see if we can set up real quick let's do this this is a a lot better i think for now uh let's set a break point here let's see if we get blazer to break on this see if we can break on the point where we're calling the api and i'm again not getting uh let's try uh mr magoo showed me this the other day let's see if we can get this to work um on the program.cs i think it was headers.content type uh headers is plural so let's let's see what we get hang on one second uh task dot delay sometimes it takes a second for the debugger to get attached so let's see if that is whoops ran without debugging there let's try this again let's run with debugging and we'll just wait a second here make sure our debugger is attached and there we go we hit it that time i don't know if it's uh just all a good long pause or if you need to put the await there let's see what we get back so we've got our status code and this um somebody mentioned that uh the try catch might not be working we are in that tri-catch pattern because first of all we hit a break point in the try catch and then when we're done we're seeing um this get set to false uh let's see here so response code is okay let's dig into the response messages and let's see what header information we have here uh the okay so i don't think we're getting like the full debug information because webassembly maybe uh let's try throwing a watch on this it's not letting me dig in properly has to be a webassembly thing so headers allowed headers general headers it doesn't look like i'm able to list them i thought i'd be able to get a list of what's in here and display them but let's see if this has anything in it uh this is not the normal response object so let's see cloud header types header store yeah that is not what i expected to see in there uh so the these don't appear to be human readable information um if this was not a web assembly app i don't think this is what this would look like um this is uh some web assembly stuff here uh so let's move on the point being here that we do have a successful api call we do have a successful api call because of the way the web api defaults back to just that empty blazer page so it's just failing over to a basic http page or a blazer document that's got nothing in it and it's trying to parse that out so that's why we hit here with the response and it fails to parse correctly let's see if we can find that that header real quick uh it would be let's see we're probably going to have to write this out because the debugger doesn't seem like it can find it correctly uh i don't want response code i want response dot headers dot um let's do this real quick let's see if we can uh let's see far response i'm trying to think of a clever way i can just put all these out in the open so we'll put headers uh we got about 20 minutes left here i want to spend too much time on this um see what get values gives us here returns all header values for specified header restore there we go we need um the header that gets us the uh uh let's oh you know what we can use let's do this sorry about that uh let's go to fiddler fiddler will give us the information we want so let's do this fiddler is going to intercept the http traffic let's refresh this page if we can nope can't do that one got to rerun the application let's do ctrl f5 going to run it without the debugging bring this back up to the main screen here and we'll clear this window out and navigate to fetch data we can see it come back as okay and fail and we can see our headers in here so the request headers sorry i lost that um response header so we want to look down here uh so it's going to be content type is what we want uh to check uh that's the header name that we want to check so we could check the content type if it's text html we don't want to try to parse that so if we do a get uh right here vars header equals uh response dot headers dot get values let's see if we can do this should be the content type see if we can get that content type back i think this is uh what we're trying to accomplish with dan's suggestion here uh so again we'll just throw this in a string and say um that the header is that and we don't need the var here now and we'll just display this on the screen and it didn't like something there ah so this is this could be multiple values so let's just take the first one and it's not liking that get values i don't know if i broke it or what it looks like uh the razer compiler is going nuts again this is what happened to me last week is when we start getting into the weeds on an issue okay so that why does it have an ambiguity between it's not defined twice is it so the razer compiler seems to have lost its mind again this is what happened to me last week on the show okay now i've got a legit error all right so it's back to normal uh was trying to get the first item because this is bringing back an array and it's trying to cast an i enumerable just get the first item off of it so i can't i want just a singular item there we go time to restart visual studio no kidding uh that seems to be the trend lately and let's see if we get uh something back uh we do not get anything back so that content type did not pull back the correct header all right so we're we're gonna ditch this idea temporarily i'm assuming you can do that uh but i'm not looking in the right place for that header um this is still a necessary try catch because there could be some error in this um approach somewhere whether it's we get um we get even if we get a uh the header properly identified that's still going to leave us open to an error if for some reason that this json data is corrupted or maybe the json definition changed and it doesn't match up with the weather forecast anymore uh hopefully that wouldn't happen but that's something that's a possibility if you're you know your versioning isn't correct or something you're hitting the wrong version of the api maybe that weather forecast has changed there's always a possibility that there's going to be some kind of parsing error so it's always good to have a try catch around it so this gives us our um our validation that this is going to be a successful api call and if it is not it's going to do something with this error message and handle that error message for us all right so another thing is we're dumping all of our http client and requests into the page so if we wanted to take all of this information and put the responsibility in a service we could do that as well so let's convert this over to a service really quick and let me boot this bot from chat real fast unless anybody wants to be rich click that link don't click the link guys don't click the link all right uh so i'm going to create a file and let's put it in a folder let's create a new folder we'll call it services and we'll move this code off to a service so let's do add a new class we'll call it weatherservice.css so we'll create a service here and we're going to take and we're going to move this response it requests information to the service now to create a service we need uh http um client here so we're gonna say constructor if i type ctor and hit tab i will get a constructor stubbed out for me and then i want http client and we're going to get this through dependency injection so it's going to go in the constructor here for this other service so i'm going to hit control period i'm going to get system.net http i'm going to hit control period again over on this side and let it go ahead and assign that variable for me and i prefer to have this above just my personal preference there so now i have a weather service with an http client injected and before i go any further i know i will forget this just because i always do i'm going to go into program.cs and i'm going to add this service here we'll go ahead and add the service and this is going to be a weather service if i forget to do this i'm going to get a very familiar error that says that uh the framework could not find a value for the type weather service or a service for the type weather or a implementation for the type weather service or something like that uh let's see now we need to create a method that returns that that weather service information so we're going to get um a an array of weather forecasts so this is going to be a task of weather forecast so we have our array of weather forecasts we're going to return and we're not really accepting any data into this so we don't have any parameters oh and i need to name it get weather forecast sounds good to me we'll go ahead and call it that and then we can move our code into this section here what is not going to work is this um try catch code not in this the way it's written so we'll move just the weather forecast information out and we'll put that here uh so we could we need to change some of this up just a little bit yeah we have we have dogs barking uh it it's the holiday season so there's probably deliveries happening so santa claus is coming and the dog is barking at the brown truck that santa claus drives if you have children you probably understand what i'm talking about uh let's see so we need to return an array of forecasts so we will go ahead and let's call this var forecasts because forecast is no longer in scope that is what is on our um that is what is on our blazer page uh we don't need the response code here anymore but what we can do is say if is sorry response dot i think i got ahead of intellisense nope something is not happy here http does not exist in the current context that's because it's called http clients here so we'll move that over uh we'll say response dot is success this is again not the end-all be-all um error checking but it does it does guard us a little bit against a failed response trying to parse that data let's see what do we still have here oh it's a task of a task so we need to call this async and let's see here and i'm still missing system.json there we go and then var forecast does not work like that we'll go ahead and return there um if this is not a successful response this is where things can get tricky tricky so what do we do if this is not successful so we're saying here if it's successful we want to return this read from jason async weather forecast task if it is not successful what happens here uh so we could go back and do a task dot uh from result and again array empty and we can return a weather forecast and there's probably some good best practices around what to do when these things fail um let's see no that's all right i'm not awake uh let's see what have i got wrong here cannot convert we could return null and again returning null in original code left the loading message going so there's some work that needs to be done there so i'm going to put an idea out there that i like to use so there's a concept in functional programming called an ether so we could throw let's see if this can throw back a null just to make it shut up there we go all right so we can throw back a null and we could use we could do something with that null if we detect it on the other side uh let's go back and finish this thought uh so we're going to move this out this information goes away and forecasts now is going to be resolved by a service so let's finish this code up um so instead of injecting http client now uh we're going to use the weather uh weather what did we call it weather service which is under shared uh let's see that's already got a using statement why we not client services there we go got to get that in full name space in there and again i don't get the um i don't get the magic of control period here because it's razer so after this we'll take a look at how we can use something called an ether to help us out there isn't really a concept of either in c-sharp other than value task so i can explain that in just a second here does the order of using inject and page directives matter um the page directive does not i don't believe uh we should be able to move the page directive anywhere and it still applies um the using statement doesn't appear to have any effect either but this is the general uh practice that you see it's a common practice to have them in that order so we'll call weather forecast there and now our page should still work we may not see that error message properly displayed because it may go to a loading state forever because it's always null and we could always trap that null uh it did work so that failed let's go fix the uh the failure mode let's go ahead and pull this back into a correct response and make sure that we get a valid there we go that worked so now you can see we're using a service to get the data so we've taken these http http responsibilities off the page and moved them out to service this is super helpful for a couple reasons if i decide to move the blazer application to run server side or maybe i'm doing some unit testing or integration testing or something like that i might need a service that can handle multiple ways of fetching that data um so what i want to do uh in that scenario is instead of having a concrete weather service what i'd like to have is an eye weather service or an interface and that's really easy to set up once i have all the methods that that service is going to use i can simply come up here and look at my quick actions in visual studio and i can say extract interface and then i can pick the um the members to extract from that interface and let's go ahead and hit ok here and i think let's see let's see if we did that right uh actually http client i don't want in there let's take that one out um i should have unchecked that box and this is actually uh this should be private read only let's see if that worked read only is not valid for that item uh maybe because it's a property there we go didn't need to be a property uh so that that just takes the http client out of the public name space there it's going to be resolved at construction time now i have an interface and i can come back to fetch data and where it says weather service i can call it i weather service and then i need to remember to update my dependency injection to use an i service here and what this is going to say is wherever you see an eye weather service give me a concrete weather service and i will still have that http service what's nice is i can replace this at any point in time with other services that have that same behavior so now i've got dependency injection here and my weather service is now kind of agnostic to the page the page doesn't care how weather service gets its data it could be an http service it could be something else maybe it's grpc behind that weather service somewhere maybe it's signalr who knows it's getting the weather the page itself or the component itself really doesn't care what the weather service is doing to get it now let's look at one last pattern before we go um this is one that that i think is kind of clever i like your team that you're working with may have opinions we'll kind of preface by saying that uh this follows some like functional programming type guides um this something that you can use though we can create a higher order function out of the weather forecast service so weather forecast when we're using something that's going to get data uh there's a chance that it could error out and it might bring back data or it might bring back an error it's it's kind of a multiple states that are types that it could be so it's it's got two types that it can return uh this is usually called an either uh there is one either that i know of in c sharp one either and one either only and that is value task so value task is going to return two things it is going to return a value or a task that returns that value so that's the only either that i know of in nc sharp there may be more that's the only one i've identified we can kind of create that without adding extra frameworks and all that nonsense by just writing some functional code so let's look at our weather service again um and what we can do here is let's create a function call this public async task and this task is going to um it's going to be called try um get weather forecasts okay so it's going to try to get the weather forecasts and what it is going to do is give us an action of the success type and when i have a successful weather forecast fetch what does that return well we know that already we get a weather forecast back so i have an action of weather forecasts we call that success and then i have an action uh what is the failure mode well it's an exception so when i fail i get an exception back so i have my fail mode there so now we can try catch this like so and if we try to get the data let's see we've got uh try here let's go ahead and keep that besides the null bits then we will go ahead and uh let's see how can we work this in we're going to have an action of um it's going to be a success and we'll apply that action to the results of this call here see if i got that right so we're gonna delegate uh how this is handled i think i have too many curlies here too many braces so if it's successful we're going to delegate to the function that is supplied what to do with that data if it fails we will delegate again to what the user has defined as their exception handling oops i put that backwards my mistake all right so now we have try get weather forecast we need to put that in our service by the way uh let's see if we can i don't know if there's any quick wrap unwrap change signature extract base class so now that we have our eye weather forecast service let's try this again let's do a quick refactor and nope extract interface again uh let's look at what we get generated it's going to generate that try for us put it in its own file i was trying to let the tooling handle this for me and i goofed it up and remove that go back to i weather service and paste in that other method so now the signature is an action tri-weather try get weather forecast is an action of success and an action of failure so action success gives us a weather forecast back exception uh action fail gives us an exception back so now in my service or my fetch data component let's take a look here and sorry i got off a chat room let's see what we've got going in on chat uh let's see we've got a you can i don't know you can do it [Laughter] all right the ascii uh chat is awesome all right so now we don't need the try catch let's go ahead and take this out for now the try catch is built in to the uh the try method that we just created so what we can do is um we're going to use the weather service and we have our try get weather forecasts here and try get weather forecast takes two actions so what we have is a success in a fail mode so let's do a quick success mode here um we want to have uh did i did i miss anything let me know if i missed anything uh so the success action is going to take a method that that utilizes a weather forecast so let's call this one um on success and this is going to take a weather forecast array of weather forecasts and we can do whatever we'd like with those weather forecasts uh we could just say that forecasts is equal to whatever is passed into the function we could do that let's see method must have a return type oops my bad uh let me say void sorry this has to be in a wait by the way uh and then we could say on success now we need a failure mode so we'll say void on error uh we're going to get an exception back and we want to do something with that exception so we could say is fail equals true we can get that we can throw away the exception if we don't need it and then also we need to remember to set is fail to false here and we can then say on fail or on error i called it and that should satisfy that function and there goes our squigglies away so this wrapped things up nicely it put the try catch into the service and then it gave us an option of what to do if that was a successful call or if it was a bad call so this this helps with the fact that getting data doesn't always return data it's it's not a clear cut case of whenever i call this function i will definitely get back data because you may not get back data you may get back something completely different like an exception so this gives us a way of handling that so we can say if it's successful i know for a fact on success i get back weather forecasts and i know for a fact that when it fails i get back an exception and now i have a way to handle uh both of these emanuel asks is this pattern common yes and no so you don't see this in c sharp so much at least i haven't this is something that other languages like f-sharp handle through built-in types so there's something called an ether so what you would see in something um i don't know if this is how f sharp handles it exactly but this is how functional programming languages would handle it you haven't either and either is of one type or another let's just say like uh let's try saying it this way you would have a try get weather forecast it would return instead of return instead of encapsulating things in uh these um parameters the the signature would look like this it would return an ether like that so there's actually a type so an either is a type of t success or t fail for example so there's actually a built-in system type that handles these we don't have that in c sharp so what we can do is use a higher order function and give us options to either handle that successor failure another place that you see this pattern is in javascript so this is how promises work kind of and you you see this a lot in javascript where you'll have uh matter of fact the built-in fetch let's see if fetch actually looks like this um let's see if the fetch api resembles this uh we have then in here so then is kind of similar uh so we're using then and then catch so you'll you'll see it that way there's trying to think if there's another api i can't remember off the top my head where i've seen this in javascript but i know it's pretty frequent um it might be let's try good old jquery um let's see if jquery has one that's like this let's try get yeah so you'll see um i know that jquery sounds old-school but uh there are things that it did do right um so you'll see their their get api or their ajax api for example has a success what do i do when i have a successful ajax call this one has things like done fail and always so these these are patterns that are common in programming maybe not so much in c sharp and of course language is going to dictate um kind of where you see the the parameters get set up in those functions some of it's done through method chaining you can pass them as parameters here and in the case of f-sharp or a functional language you would have a return type a return type that contains either a or b so great question um i like this uh this little simple wrapper on this it it tidies things up i have a clearly defined success and a clearly defined error message uh handling section of my code now so i can i can do whatever i need to do in here um i may have for example an error handler that i want to pass that exception off to to log it or something and it doesn't mean that i can't do any of those things inside here as well so i could for example have logging here before it hits the component and i could also have logging here as it hits the component uh that's totally up to you in what you need for your application but the main thing is from a user user experience perspective here i have the ability to uh now dictate um if this was successful then um i'm going to handle this properly i'm going to do something with it and then also this still remain null i think so again forecasts can be handled here too do i want to put something in that array so it's not null anymore so that loading message stops showing so that might be something that i want to do but now i have these two compartments that i can work in i know whenever i'm in this line of code uh i'm working in the error mode in when i'm here working in success mode it's similar to just wrapping the try catch or just putting a try catch here it's just a little bit cleaner i think hit tab it's not really that much different than a try catch it's not really that much different so this is the try section is our success and the catch section section is our error uh it's just giving uh meaning to it it's naming things it's giving some proper naming conventions to what we're doing so we'd say array dot empty drop a weather forecast array in there and make sure that we don't have a forever loading screen show up and now this should work just fine i'm going to load this one more time what is the cons to the pattern again another good question uh when i started working on this i prefaced by saying your team may or may not like this pattern uh so try catch is kind of universally understood we all know what try catch does when you have many lines of code involved in a try catch things can start getting a little messy again it's not really doing anything different so if i were to take this code and place it here and move this here this is all pretty much the same thing but some developers may say that this is easier for them to read some may say that this is easier for them to read so it's a matter of preference at that point what i like about including this in the service call where it is this try get weather forecasts uh is it reinforces the fact that you cannot use try get weather forecasts without taking care of the needed success and failure modes so it implies by convention that this has to be done you have to have a success and you have to have an error in order to get the weather forecast back it doesn't leave somebody open to writing code against it and setting them up for failure where they're not going to handle the exception it doesn't mean that they're not going to write code like this either though i mean you can only hold hands so much before somebody does this right so you know you can only take people you can lead you can lead them to water you cannot make them drink uh that that old saying still applies here you can't fix stupid dan you can't fix you can't fix stupid um what is nice here too is this is a method call so anything anything at all that takes an exception can handle that so um i don't necessarily have to have this on air function built into every component now this is something i can i can put in a shared library and i can have a generic error handler that does something with that exception and i could reuse that bit um so there's some opportunity there as well so i could have um uh an exception handler for uh maybe i have a weather forecast error handler or um just a generic error handler that does logging and i can just plug those in to that as well so there's options out there can't make them read the docs either no kidding so hopefully this is some useful information there the main takeaway here is uh http uh http client you see a lot of uh usage of just getting from jason async get from jason async abstracts away status codes from you uh so you're you're missing some error messages in there you're also missing opportunities to catch failures for parsing so it's always useful to put try catch blocks around this stuff at the very least then you could take things a step further you can use get async and get async gives you not only the status codes it gives you header information there's also i didn't have time to get into this today again we're 30 minutes over it's supposed to be an hour guys um when you're calling get jason async there's there's an ability here to add header information to the request so you can do stuff with the request as well so if get weather forecasts required a certain api key maybe it's a secured place i'm getting this weather forecast data from it requires a authentication key maybe a what do they called bearer token there is potential for that as well so if we dive into a github repository that i have if we go to telluric blazing coffee which you may have seen me digging around in before blazing coffee has a page that does a file upload so in manage employees nope not that one managed products i believe it is in manage products you will see me use um in this update item method here nope it's not that one either it's file upload here we go so i'm going to upload a file this file has to have an authorization token attached to it so what you can do is set up that that header and then you can apply a request header to an http call now the http call and this one is abstracted away from you you don't see it uh it's happening within the teller grid but essentially this is the idea you create a request header and then you call post post async and that request header gets attached to that http post so if you're if you're needing to do any of that you'll need to kind of go away from the abstracted post is jason async and use the just post post async method so this lets us do more you'll see that there's seven overloads here so i couldn't get into it all today um you could do cancellation tokens as well http complete operation so there there are some other paths in here that you can use uh so again and post json async has headers in it so if you look at http there there's a lot of stuff get byte array get from json um put post and patch are all in here as well so these are all things that you need to uh communicate with your servers uh let's see post async real quick uh again lots of overloads here um you've got your http content the content you're sending up um remember where the header portion of that is and maybe in the content object it's a topic that's way deeper than an hour show but this was just about fetching data pretty much uh there are more documentation bits on microsoft docs.microsoft.com uh so you've got http client client handler and http content so there's a lot of stuff in here that you may need in working with your apis um can i do a session on authentication and authorization and blazer server and blazer web assembly yes i could do that and i don't mind doing something that somebody else has already done but i think there's some good material out there if you want to kind of get a jump start on that and watch it today a good friend of mine here curious drive i believe has some authentication bits you don't have to wait for me to cover that that is a good suggestion uh to cover again google authentic here we go uh so there are a bunch of authentication related videos here uh so more than happy to point you towards uh curious drive um so that's one one resource you can look at and then we can cover that on a show as well um it's always good to have a different perspective or uh refresher on those things so great suggestion there all right let's see we've got um we've got tj vantel coming up here um in just about two hours here uh yeah identity and cookie settings that's all good stuff too we'll have to do some more shows on like state management saving cookies and saving uh local storage and all that again um this is actually i think going to be the last show for the year i want to say i think i have the next two weeks off for the holidays and a lot of folks in the u.s and i'm assuming abroad probably have similar days off as well so i don't want to air a bunch of shows that nobody's going to see and or would have to catch up on because we're all going to have things to catch up on over the holidays or after the holidays hopefully everybody's taking some much needed time off from this year in general right uh let's see here let me double check my calendar and make sure before i tell you not to tune in um that i am indeed off those days so we've got wednesday the 23rd is definitely a day off that is next week and then wednesday the 30th uh so i will be off next week i will possibly be on the 30th so um if anybody is around on the 30th i should be doing a show then but next week no show no show for sure i think a lot of folks are working next week so we'll are the following week so we'll have a show on the 30th leading into new year it will do a recap on my latest article um maybe i can give a director's cut of that so if we go to blogs tell i just wrote an article here it's uh 10 blazer features you probably didn't know a lot of folks in this channel may know most of these but there's some good stuff in here we can cover on another show um maybe on the 30th we'll do a little recap for the year and go over some of these things uh so basically uh anything html and css blazer can do anything javascript blazer can do and guess what if javascript can't do it neither can blazer you can do combined mvc and blazer in the same project signalr we've covered that on the show we might do a little grpc and protobuf on the show sometime uh razer class libraries we talked about on two shows prior lazy loading we haven't covered yet something we could talk about uh lazy loading and javascript that's uh something i've been talking about on my friday show uh preexisting.net libraries and full stack testing are other great things uh dan no so dan says not true javascript cannot run c sharp but but it depends how you look at this so if you are using blazer in the javascript interop technically technically you can make calls to javascript from c-sharp and calls to c-sharp from javascript so it can run javascript if you're running blazer sorry it can run c sharp javascript can run c sharp if you are running a blazer application so vanilla javascript by itself can't run javascript run c sharp but without blazer yes exactly um i imagine though at some point there is quote vanilla javascript in the blazer framework that is allowing this to happen you still need the.net runtime to run c sharp code so just like we need a javascript engine to run javascript code so i'm not sure if that's a fair comparison dan i'm going to agree to disagree on that one all right tj's coming up here at i believe it's one o'clock let's double check our calendar let's see the coded live calendar is that is not the right one let's check the code it live calendar and see i've got tj and elicit later this afternoon i can never remember their time slots though uh so tj and i and where's our calendar i thought it was front and center uh oh oh there it is schedule if you click on schedule um it is at 12 45 so in an hour uh we'll have tj on for react wednesday and then elissa at 3 p.m uh for um the ui wednesday which is always fun she had her sister on last week that was learning css and html so great two great personalities there make sure you tune in the rest of the day for them uh since we since tj is up in an hour and generally nobody else is streaming about this time i'm going to i'm going to go ahead and say we'll see you in about an hour and i won't be raiding any channels but i want to thank everybody for tuning in again next week i'm going to skip a show uh get some time off and then i'll be back on the 30th looks like so we'll see you again then and then friday uh we have um a code party on friday this week on code it live so make sure you tune into that as well those are always fun we'll be doing q a and wearing ugly sweaters and all kinds of fun stuff so take care everybody uh we'll see you friday and then we will see you after christmas

Channel: Progress Telerik

Views: 448

Rating: 5 out of 5

Keywords: blazor, webassembly, stream, twitch, app, real time app, blazor basics, blazor tutorial, .net core, .net, css, front end tools, front end, blazor power hour, css tools, ed cherbeneau, WebAssembly, HTTP, webassembly applications, blazor example

Id: OFqqeP9tVw8

Length: 98min 15sec (5895 seconds)

Published: Wed Dec 16 2020