Ten Steps to Mastering the Fetch API

[@IntrinsicFlake]

I appreciate your channel so much. I randomly came across it while giving myself a refresher on a few things, and your JavaScript playlists are excellent. Now we get this gem??? Super awesome!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you so much!

[@jesf570]

I've seen a lot, and within 5 minutes I can tell, this guy is a natural real life teacher not just a KZbinr. Name checks out. Love it

[@Gohealt]

Hands-down, one of the best teachers out there, regardless of discipline.

[@swedishpsychopath8795]

I thought ColorCode was good, but then this guy appeared in my playlist while I was sleeping! OH MY GOD! You are a wonderful teacher / presenter!!! The BEST!

[@MoH4Nn4D]

You are the best, the way you just handle the code, your calmness your warm voice all come with a very sweet rhythm and atmosphere of learning.

[@IntrinsicFlake]

I wanted to thank you twice xD Thank you for sharing your knowledge with the world. If you by chance were looking for some video ideas: - Development to Production process - How do you know if your basic static website is secured enough to go online? - More in depth on unit tests - Authentication for Registration and Logging in (with testing) Just some suggestions! I look forward to more of your videos :)

[@SteveGriffith-Prof3ssorSt3v3]

Thank you again! I have a video where people can post requests and vote on the requests - kzbin.info/www/bejne/gnTIq5SuZ9qBacU On my own list I have over 2000 videos that I want to make. :) Just a question of time. unit tests and web authentication are two topics that I hope to do soon though.

[@gauravdaware8671]

This tutorial provides a comprehensive overview of fetch() api, covering all the essential aspects in depth. Thanks to Steve.

[@billwoods4935]

You're one of the few who could actually TEACH programming concepts. Thanks for creating rich content for us, I appreciate it. This could have easily been a premium course. I, myself, am a content creator/instructor, and I know how hard and time consuming it really is to put together a course with this quality and chaining/relating each section to each other. Again thanks for sharing such a high quality tutorial with us, free of charge.

[@SteveGriffith-Prof3ssorSt3v3]

Well, that is what I do for a living. I run the Mobile Application Design & Development program at Algonquin college in Ottawa, Canada. I originally started this channel as a resource for my own students but then it grew organically. Now I know of at least a dozen college programs that use my videos as part of their curriculum.

[@rohitenwurd9294]

very beginner friendly explanation, you are super articulate, thanks

[@victor_yahoo]

Beautiful, thank you. Definitely the best coverage of this subject.

[@kritikaverma8739]

Stumbled across your channel randomly and I'll have to say yours is the best explanation on yt and that's saying a lot because I have already watched 100s of them trying to make sense of javascript. Thanks a lot Steve. 😊

[@ryanwoods3333]

Thank you Steve! Unit testing with React would be really helpful and especially how to mock API calls since I don't fully understand it.

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much!😊🙏👍

[@fahadmohamed5734]

2:18:41 WoW this definitely as you said "the last fetch vid I'll need" well done well structured and I like your sense of humour ❤😂. I'm amazed by the power of JS & Browser on handling all that seamlessly.

[@TinyMaths]

Wow... This is basically what I need. Just built a few apps (including a weather app) using fetch API and wanted to get deeper into the subject because I used multiple fetch calls in the weather app and wanted to organize them better (among other things). This is perfect timeing for something I really needed. Thank you!

[@xzex2609]

you can not imagine how valuable this video is, I killed myself to learn these stuff in the video and all I got was documentation to read. thanks

[@ruudkorunka]

This is by far the most extensive tutorial about FETCH. This will be my standard issue from now on.

[@diegoavendanohernandez9908]

This is by far the best fetch tutorial. Thank you so much for taking the time. A slow peace explanation really makes the difference for some of us to understand better

[@Franklin7x]

You are the best! Thank you very much, your content is perfect. You speak very clearly and calmly. I'm not a native English speaker, but it's very easy to understand what you're saying. I'm learning a lot from you, thank you very much Steve! best youtube channel.

[@Franklin7x]

I can rewatch this video 10x times and I not get tired of it 😁

[@abdallahazme4757]

Thank you so much sir! I really like your teaching style, no flashy edit, no colory stuff just good explantions of concepts, just to the point. I really wonder if you could have the time to make videos for basic web apis outside the flashy now days frameworks

[@jacobwwarner]

I wasn't aware of creating a URL object before to run the fetch request. I've only passed in the URL as a string, so this is new and inciteful. Thanks

[@devynity4507]

I will start this tomorrow, I'm searching for "THAT " one video that will lead me back on my path again because it seems that I'm currently not moving forward as of late, I hope this video is it!

[@SteveGriffith-Prof3ssorSt3v3]

Good luck! 👍

[@devynity4507]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for this video! Its so easy to follow, Thanks for making me move forward prof!

[@sjshdhehbesjks]

best teacher on internet thanks a lot for providing this quality content for free

[@Aditya-gh4jy]

The best Explanation of the Fetch API on KZbin.

[@devstefancho]

oh my god, I’ve watched many tutorials on YT, but this is the new type of the video I’ve never seen before. Great work!

[@TyronneRatcliff]

Solid content! If you can master the Javascript Fetch API you will have a really good understanding of how the frontend end of an application communicates with the backend.

[@dimjim2365]

Wow, my mind is totally blown. Ha. Thanks. Wish I had found this 2 months ago. You have answered soo many questions that I had. Love the presentation.

[@whosbetter9108]

OMG! the way you explained these concepts maked them look so simple you a wonderfull teacher and an amazing human being , i can't thank you enough now matter what i write , thank you from the heart.

[@lightmanBroInnovation]

Proffessor is the best.. i mean it. Any time i want to understand more about web development stuffs then i come to your channel. Thanks for all you do @Steve Griffith ☺☺.

[@amitanand6810]

I was waiting for this type of compiled videos! finally you are doing this! It might sound cheesy but you are the best on the youtube!

[@amitanand6810]

also finally we got to see you on your thumbnail! i would say you are the best js GURU, i don't know what the youtube algo is doing(don't know why so underrated!)

[@omojjegomosc8211]

Best API tutorial that I've seen.

[@bmehder]

What a great deep dive into fetch. It feels so nice to know I can always come back to this video for fetch documentation. Thank you!

[@prashanherath9944]

excellent content ♥. A teacher who knows stuff and most importantly who knows how to TEACH. Thank you !!!

[@chhavimanichoubey9437]

This is the ultimate video i was looking for in last 24 hours, thanks for the effort, added a star to your github repo.

[@brucewayne252]

Have got a good feeling just seeing this 2 hour plus lecture ❤. That too on fetch API

[@eric55099]

You the BEST...much love from Nigeria

[@pranaypaul5216]

Great content this is what i'am looking for and i found it Thank you

[@xzex2609]

your channel is a gold mine.

[@chmkzt]

Thank you so much Steve. You make this so easy to learn.

[@prashlovessamosa]

Sir thank you I was struggling to understand this thing but you made it so easy.

[@awakenwithoutcoffee]

Hey Steve, thank you for the amazing course! Very generous of you to share so much knowledge. I do have a question: - the server isn't working for me properly, do you have a video or resource that goes over setting one up ourselves like you did ?

[@matteonegridev]

Wow this is amazing! Best teacher hands down!

[@matteonegridev]

P.s I came across your channel randomly, then realized I was following a Reddit thread and you were there!

[@smilemakerb]

Awesome tutorial! Always love your videos

[@FlamingoFliez]

your work is so clean!

[@Fshhady]

Thank you Steve. Thank you very much my friend for the great content.

[@johnmahugu3527]

this is perfect prof, thank you so much for this.

[@gagandeepdayal]

Your tutorials are always amazing Steve. Your old subscriber here 😊

[@usmonovdev]

extremely amazing content, Thank you so much 🤩🔥

[@mikelantzelo]

Thank you very much!!!Excellent explanation

[@nickrodriguez7758]

Absolutely flawless video, thank you very much!

[@wick12298]

Best teacher and a great explainer!

[@paperC_CSGO]

Thumbnail game on point!

[@SteveGriffith-Prof3ssorSt3v3]

Figured it was time to put some effort into those. :)

[@djlee0721]

Gold! Thank you professor 🙏🏼

[@filipivanovic9556]

this tutorial is a pure gold

[@anesdiaf]

Neat as always, i think a lot of devs need this, especially when -tech leading- teams like vercel are using the fetch api as their primary method to handle http transactions.

[@bones1225]

About time somebody actually produced an informative/useful/enlightening/dummyfree/fun to watch vid. Many thanks. Change your channel name to Jesus helping the poor.👏

[@shahinza]

Hello Professor, @35:37 in your video, you mentioned that there is a FOOTER as well, but I couldn't find any information about it online. Could you please assist me in finding resources to learn more about it? Thank you

[@SteveGriffith-Prof3ssorSt3v3]

The standard has actually changed quite a bit since I first started working with HTTP requests. There is now a crc calculation in the footer of a gzipped file. So, if gzip is being used to compress the resource that is being transferred over http, then that is where you will find the crc. There can also be crc checksum values in the TCP/IP layer. These are backed up by other crcs that can be found in the Ethernet layer. All this to say, you don't need to worry about crc in your fetch calls. However, if you are interested in providing some more integrity for your files - script and link tags in your HTML - and you want to make sure that they are "verified" or not tampered with or modified, then you can add the integrity attribute to those tags. kzbin.info/www/bejne/a5KWfaeehpereas

[@shahinza]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much, Professor.

[@damaniturner6510]

This is incredible!!! Thank you so much professor!

[@nchomey]

I can't wait to dig into this! One question - does it cover ReadableStream and WritableStream? Or do you have other videos that do?

[@SteveGriffith-Prof3ssorSt3v3]

In the bonus section it briefly touches on using Readable streams to monitor download progress. I have other videos for streams planned though.

[@nchomey]

@@SteveGriffith-Prof3ssorSt3v3 great, thanks!

[@TyronneRatcliff]

Awesome tutorial. Thanks!

[@vinoverde74]

Thank you so much for this excellent detailed tutorial. Appreciate your teaching style greatly. I am having a little trouble with fetch in section 4 (Response objects) timestamp 43:58. I am trying to fetch the fontstr and not sure how to apply it to the CSS. Here is my code. Will be grateful for any help. fetch(fontstr) .then((resp) => { if (!resp.ok) throw new Error('Invalid response') return resp.blob() }) .then((blob) => { let fonturl = URL.createObjectURL(blob) let element = document.getElementsByTagName('h1')[ 0 ] let myFontFace = new FontFace('myFont', 'url(' + fonturl.blob + ')') console.log(myFontFace) element.style.fontFamily = myFontFace // console.warn(err.message))

[@SteveGriffith-Prof3ssorSt3v3]

If you are fetching blob then you are fetching a file

[@SteveGriffith-Prof3ssorSt3v3]

If it is a string then use the text() method not the blob one

[@sayeddileri3461]

Hi Steve, I really appreciate your dedication to your videos. I have gained so much value. Thank you. Is there any plans on realising videos for MVC / Design Patterns?

[@SteveGriffith-Prof3ssorSt3v3]

Possibly at some point. I have literally thousands of videos on my todo list

[@amirhosseinghasemi4831]

I really enjoyed it. Thank you

[@abojoud2006]

Great tutorial, thankyou so much

[@mdsazzadhossainsiam6279]

I love to learn something in detail. It's a really helpful tutorial. But sir, you created a response object (0:32:35 ) but didn't use it. Is there any case to use it?

[@SteveGriffith-Prof3ssorSt3v3]

When saving files in the cache via the Cache API, I create custom Response objects all the time. When working with PWA and service workers, you will need to send back custom Response objects too.

[@yasminalsham5619]

Many many thanks Steve for sharing

[@rommeld.guerrerov.8505]

Great content and explanations

[@iuliancarnaru954]

Great content, amazing value

[@GurpreetSingh-op3ie]

Great content! What about interceptor, can we intercept all fetch calls. If not we can always write a wrapper.

[@SteveGriffith-Prof3ssorSt3v3]

There is no global handler for fetch calls. You can send an abort signal to kill a call. - kzbin.info/www/bejne/aaq3pGSEf7-seM0 You can wrap a collection of fetch calls in a Promise.all( ) or Promise.race( ) or Promise.allSettled( ) call. kzbin.info/www/bejne/pmHXlouEmMyFlbs

[@rockNbrain]

nice job dude! that was awesome! tks a lot!

[@hesamrahmani]

your amazing this video was so useful for me

[@Guyfromearh1]

hey there! thanks for your simple and deep speech , just one small question when i write export at the first before writing function i get an error what is that for? thanks if you help me.

[@SteveGriffith-Prof3ssorSt3v3]

What kind of error? What is the error message? Without seeing your code I don't know what you have done wrong.

[@eirenedelosreyes6025]

the video is very helpful and informative.

[@danielchazan4011]

Bless you Prof3ssor.

[@joshuaachorn8327]

What font are you using? I love the style of the () characters

[@SteveGriffith-Prof3ssorSt3v3]

In vscode, jet brains mono

[@yitingchen8278]

always great content !!

[@246rs246]

like always best content ever

[@abdiag603]

Hi Steve. Thanks for this valuable tutorial. If I may ask, innerHTML method isn’t recommended coz of performance and security issues. Does it mean using it alongside .map() and .join() methods makes it less secure and enhance performance

[@SteveGriffith-Prof3ssorSt3v3]

The source of your data is the source of any insecurities. If you don't trust your data source then you need to validate the data before using it on your page. InnerHTML gave poor performance a long time ago. Using it once to parse and append a chunk of html will still be faster than calling append repeatedly.

[@and_metatheory]

great video, a lot of useful info

[@zoropppp]

You are a Genius ❤❤❤❤

[@fellastout]

Thank you, professor, as always. For the 2nd module (try-async.js). Is it not possible to throw a new Error object and save it in a variable? I'm getting an "Expression expected" and not sure why. I was thinking of creating a custom error object to reference in the try catch block. if(!response.ok) { let myVariable = throw new Error('not a valid response') }

[@SteveGriffith-Prof3ssorSt3v3]

You can put an error object into a variable like this: let err = new Error(`message`); However, as soon as you throw the error it goes immediately to the catch. No assignment takes place.

[@fellastout]

​@@SteveGriffith-Prof3ssorSt3v3 Interesting, I'll look more into it. See if it's possible with a second await keyword or perhaps using setTimeout. You dont have to respond with a yes or no; let me dig this rabbit hole. =)

[@SteveGriffith-Prof3ssorSt3v3]

@@fellastout that's when the learning happens

[@emmanueleban1096]

This is great boss..thanks

[@kkomax7]

FANTASTIC!

[@simonmalaret5506]

On part 5 it feels like your code in vulnerable to XSS. I've heard quite a lot about that and I am in the point of my dev journey where I want to understand how to write code that isn't vulnerable in vanilla js. Would you mind explaining how the code in the video is vulnerable pls? How to not make it vulnerable? Thank you :D

[@SteveGriffith-Prof3ssorSt3v3]

XSS is a whole other long tutorial on its own.

[@DeathBender]

Shouldn't we just use Observables (RxJs) or Project Reactor nowadays? Is the Fetch API (promises) still the "way to go"?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. Using the vanilla js core features are always better if you know what you're doing

[@blendshala6506]

this is amazing

[@valenciawalker6498]

Thank you!

[@kevink3072]

Thank you in advance

[@Glitch-txs]

amazing!

[@romeojoseph766]

Wait is this better than the fetch(or ajax) playlist you have

[@SteveGriffith-Prof3ssorSt3v3]

It's everything in that list put together in a connected logical way with a few new things

[@frostheavenangel]

"Let's put a happy request in there..."

[@nevestunga955]

👌👌👌👌👌👌👌

[@goffyfoot82]

Thank you ..!!

[@goffyfoot82]

you have to good stuff to watch !! and a very nice way of communicating the material. Peace .....

[@MRMOTOFOTO]

The thumbnail title is not a lie

[@fahadmohamed5734]

1:53:14 guess who was getting around with cors 😂😂😂😂💔

[@navinkarki6354]

now you are getting views what you really deserve

[@Brad_Script]

innerHTML with string interpolation is nice but it's unsafe. You should never use it with data coming from the outside, you risk having XSS. It's much safer to build html element with document.createElement then use the innerText/textContent setters to safely write the content on the page.

[@aadil4236]

You are very handsome. I am not gay. I don't know why I clarified that but you are a handsome fella.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. :)

[@paradigm2841]

XD

[@elpolodiablo5486]

Bro that's creepy af

[@aadil4236]

@@elpolodiablo5486 🤣 i know right.

[@SteveGriffith-Prof3ssorSt3v3]

@@elpolodiablo5486 lol

[@Anonymouzee]

You're a "manancial" of information... complete, relevant and exaustive information... but man... 2h20m!!! (with pausing for testing, etc. etc.) that is exausting !!! ;-)

[@SteveGriffith-Prof3ssorSt3v3]

You're allowed to watch it in chunks. 😀

[@mimizcool123]

what I love about your videos is that I know I’m always going to learn something new, even for topics I’m already familiar with. thank you for the depth, detail and care that you put into your content!

[@dmwasielewski]

Grate course, that's what I'm learning right now. Thank you very much!