 Okay, hi, am I loud enough? Ya, yes, okay. So hi, this is my first time speaking in talk, okay. So it's gentle with me. Basically this talk is about like... So you want to project your voice, I think? Like sharp, pretend you're yelling at a naughty child. Okay. Maybe you just stand up. Stand up. Oh, okay. Stand up. So this talk is about the Fetch API. So as anybody heard of, this Fetch is a new thing in JavaScript. Only heard. Only heard, okay. So this talk will be about sort of like introduction. So we all know our SSR is as MLHTTP request. So this is text like this. So this is what we usually always do to fetch any request from server and think like we do some server requests. So why do we need to have fetch? With me, it's like a base one for SSR. So it's a nicer syntax. It's aimed to be more powerful and more low level than SSR. And why? It's because we can use SSR. It can use SSR. So what is fetch? This test the basis syntax. It's just a Fetch URL and it has a den which is a promise that turns you a response. So this is what you get. And this is another one that is slightly more complicated. You see that it's the nicest syntax that SSR don't want to call any events and wedding. So it's just a very nice problem when you close the ejects. So it's a vessel mode of ejects. And currently the support will rather be for code network. There's no for Safari and Pitch. So yeah. Then you can read about this one. Okay. So because fetch is just promises so you all should be familiar with promises. So for those who are not then we can do a click refresh like promise is just like you have a function that passing a resolve in a Jack and the response is just a value then passing a den with a field that catches the error. Okay. So there's ES5 syntax. How you do a fetch and ES6 is quite similar. Just replace the parent L with a function so ES6. So what is the winner of fetch? Fetch losing out haters and body and press and response. So body is just an interface whether request and response is part of the body. So request and response is actually the third part of the body. So haters. So if you had to try with haters you always do something like this request and response is very different. So fetch. So in fetch you can actually do something like this. So you can see that you just we do a basic org you pass in a variable so this part is your your haters will be like this. So it's like a very nice syntax and you can do something like this you pass in a variable create a new haters object then you just append. So you just have to doing a object. So this is like there's actually methods for like under the haters object that you can find in the NBN. It's very good we saw about haters so you can actually read about there so and another thing it's like you can actually query the haters. You can actually do that in the social. So you can actually like based on the actual response you can get the type of your response and pass it correctly. So that is powerful thing about fetch. So you can read about haters. Next is the request. So there's another way to initialise your fetch. So you can actually do something like this like you make a new request object so this is a you pass in the variable your resource then you can get the response to your based on the request that you pass in. So the syntax is a bit weird so it's like you pass in this somehow your this domain is based on the domain that you pass in. So it's actually quite nice if it's okay then so another method is you can do something like this. So request is like the first argument is URL and next is just any object. So this is service worker you can use it as service worker then this model request. So this is the response. So so okay this is just a test of how a demo basic demo is a fetch I try to get an image from the box so I just do a basic get I try to print out the response and try to pass in into HTML so just run see you can actually see the request is to fetch this is the response object that you can you get from the actual fetch. So you can just see that it's all the properties that you can actually query like you can get the URL the response to okay headers makes more response okay body yeah body is like a bit how to say you can actually know what is the format you can pass in the format of the actual response based on this 5 different format like full data jason stream or public buffer and you can actually pass and this is also like you can actually pass in your data so it's the body property so so this this part is your okay your the any object you can pass in a property call body and this is your your jason stream file some data and you can pass it to yourself and next is okay when you're getting a response you can actually pass the the object type of the response using a promise so if you know your promise is like then is that when you do a fetch you call and then the response will return a a response and you change it to a dot so you do a dot jason for example you're fetching your jason data you can actually do another then it's a promises then you can actually this data essentially so pass through some data so anything about do a jason dot pass so it's quite handy in a way so it's the same for other object type so like tags you can do the same like you can do a response of tags response of status tags handling errors okay then fetch handing errors is a bit that be careful about it so first like for fetch any HTTP HTTP error status it's like all the status or consider as a response so if the error status like 4 4 you still be a response so if I find that if you're doing the fetch you do a then then you didn't do a cache try to do a you know how you do a promise you try to have two function like a reject in the list resolve in the reject you find it doesn't have any error in the reject it's like quite if you find that you couldn't see the error you might get off like why is it my error it's not in Twitter so you might need to throw your it's like do I can do a check on the response status like okay on this status code 4 4 I need to throw this error or the response is called it's a false it's not a correct response I need to throw that error so you might need to do something like this so it's like on like usually your status in 200 200 into a you return the actual response and if it's not then you throw an error they catch it and it's done so does that actually follow the way that Rexx or do you have to manually you don't have so is this fetch it's just like just do the this is no you don't have to do any fetch so if there's 3.02 if we go Rexx and it does the second call I think inside fetch you can supply some options so probably one of the option is that you can you can fetch that but it's not follow through yeah I think it's it's not redirect I need to check it'll follow a redirect I'm pretty sure I think you have to turn that off because otherwise that would make any time you send a 3.02 or like a redirect that would that is a redirect that would make everything break if they're expecting 200 or whatever so yeah by default I believe it's on but one of the reasons why this is useful is because I think there's I remember coming across difficulties using the XHR interface to not to detect to detect when it actually redirects so you can build or you have to do something bad I remember that so we have some smaller than let's try out Spotify we can try out fetch see whether we can instead of XHR we try to do a fetch based on this API let's see how it works so in fetch you so you pass in the first argument is the URL the second is the options object because by default it's a dead request but if you want to be sure you can do something like this you probably don't need to hold off because for Spotify it's like you can it's sort of public to clean up the response let's see what it turns so if it turns the response is okay so if you want to you can actually say like clean up if you let's say if you want to know what is the header type you can actually get the response type so it's a JSON ya so so you can actually pass in like using promises you can the good thing about promises is you can actually author your change the rotata in a way and the next then you can sort of you can actually get an object of your almost ya so should you use fetch today well no ya plus ya because there are some issues with fetch it's not fully complete the API it's supposed to be like use with a new API called streams which is so new that I can't find any you can be sure about that I'll set this link and ya so the problem with fetch is you can't really about send request like if you send a request and you say I want to cancel it there's no way to do that because I think it's because of the way it's using promises and there's no way that you say I send a promise I don't honour my promise ya so ya okay ya and there's no progressive so there's no way to know like when your data is coming back so you sort of have to just wait or something so it's within it's supposed to be use with streams API so ya that's the this is fetch so far yes and thank you so this top is online so you can see like you get this API is very similar to US she wanted to make it more ya ya ya it used promises ya ya ya it's probably closer to your super hidden actually oh okay super question right no super hidden no super hidden ya do you have any feedback on using fetch API you've been using fetch API ya so so one of the thing that wasn't mentioned is that fetch API actually allows you to specify some options when you're sending your request so you can actually say like things like football do you want to include your credentials like your cookies when you're sending the request or things like do you want to do the cross request cost cost request so these are the options that you can set in fetch quite easily so it's a very convenient thing to do so you can actually do something like if you say you want to send a credential there's a way like you can there's like different properties like more you can specify cost or no cost like you want to same domain ya and it's called with credentials with credentials it's a it's a buddhim property ya it's like the thing about this with credentials it's like you must always you always request for a credential if you're if you happen to send the request and you have a credential you might get some error ya you said you're using it in service workers also service workers not really okay so in service workers you can't use XHR because it was one of the advantages it was only one one of the services were the examples that I've seen used to fetch ya it was all fetched but it seems anyway that they say that it will be allowed I had a feeling that it's something to do with like it comes into the fetch like it sort of allows you to subvert what's happening with the fetch API and maybe maybe if you've got if you're using the fetch API they can it's still in flux so they can they can change where that works but XHR they can't change where that works because it's like everything will break maybe the other day I was trying to use fetch to do the thing and it was giving me oh let me know it's like make sure you think okay I think ya but if the if what I'm requesting does not allow course it will just it will tell me ya it will tell you if you turn okay so I don't really understand what's happening to be honest but the other day I was trying to do a cross origin request to an API which was not sending any cause it didn't allow explicitly allow cross origin requests now it was giving when I requested that API it complained in my browser saying nah you can't do this it's cross origin request nah but I said no cause and then suddenly I ask a dude cross origin request I think it's something to do with the way that it deals with trust maybe so when the response comes ah no but that's how that just happened the other day other thing with this at school is there's a fetch or one there's a fetch polyfill so you can use it today in all browsers two there's a fetch an isomorphic fetch tool which allows you can use the same API on in node so you can use this in node this in node it also works really well with async and await it's just beautiful you just do awake fetch and then you can just awake the response for the JSON and then with the one line error functions you don't need to response you know equals greater than this is beautiful with that stage zero you can get or you can't get avoid but there's a matrix this is the promise style so I assume like if you don't handle the errors it will just fail silently ya ya so you must make sure that you are you are trowing if your response is not I think there's it's not it's not returning the key response it's trowing it's not and then so if you're a trower it will just fail silently no it will just result as a correct response so if if I say for example if my response I do then I'm running it will still give back a response and it's just like the it's just ya it will just give you a bad response so it's it's like for any if you stick unless it's yours if that condition fails then you will give it back so for any server request like any error status it will just give you a bad response ya ya but return status zero it's not invalidation of this status but I mean like the status of this response doesn't seem to be a value status if it fails it should be I mean it's just I think it's not about don't in John it's like a we can't even send a request for something's wrong that's when you get like the status zero so this is kind of like it didn't send it well I don't think so what it's simply a question it only changes the URL maybe with pretend then many teals it could be wrong maybe you think so ya so ya I mean that's that's still a valid request so you're getting both of the both of the dens because it's a valid request which comes to be a 404 before the ace level errors are not going to be throwing or not going to be going to cash ya so there's a successful response ya that's correct it's good if you change that whole thing if you change like the URL to have like a different scheme no no no it's like the first part if it changes to yes to like XYZ ya this should keep your status zero probably right ya okay so what happens now is your browser catches it ya but because you haven't said like a catch or a second parameter to do that what if you're doing a basic await thing then it'll actually throw an error so now it didn't throw an error that's just your browser catching that but in your code it would get an error well in the catch you're not doing anything in the catch you're just returning an error ya if you call console.log ya you can just write ya you can just call it or something ya you can just call it ya that's going to error or error or that ya ya ya so it's still throwing exceptions but it just doesn't throw exception on basically the so I don't think it's not actually throwing an exception it's an unhandled rejection that you're getting ya if you do a sync then it would throw an error if you're doing like a single await ya ya ya ya ya so will it hang on is that is that actually thrown I think that's the same thing ya but it's still when you call a sync function it's still thrown no problem so at the end and the top level you still have to handle the rejection otherwise it becomes an unhandled rejection but you'll be doing await on that function ya so unhandled rejection it's a problem at the top level if you call a sync function it returns problems it's implemented as problems but you can just if you put away at the top level it's the same thing ya you can't put away any ya ya move on to the next thanks thank you