Ten Steps to Mastering the Fetch API
Рет қаралды 39,407
Күн бұрынThis full course covers every aspect of working with fetch from beginner to expert.
It demonstrates and explains alternate syntaxes, the related components - Request, Response, URL, URLSearchParams, Promises, Headers, File and Blob, plus how to abort fetch calls, handling download progress, understanding CORS, generating new content in your pages based on fetched data, handling multiple requests in sequence or in parallel.
GitHub repo with full project source: github.com/prof3ssorSt3v3/all...
Content-Security-Policy reference: content-security-policy.com/
HTTP Headers reference: developer.mozilla.org/en-US/d...
Forbidden Header names: developer.mozilla.org/en-US/d...
Donate here - ko-fi.com/prof3ssorst3v3# - to support this channel
0:00:00 Introduction & Setup
0:03:20 1: Basic Fetch & Promises
0:16:40 2: Async Await Alternate
0:21:35 3: URL, Request, Headers
0:32:35 4: Response Objects
0:45:20 5: Generating Content
0:58:41 6: API Keys, Credentials
1:24:45 7: Uploading Data & Files
1:39:34 8: Understanding CORS
1:59:15 9: Multiple Request Management
2:09:17 10: Abort
2:16:03 Bonus: Progress
@jesf570 8 ай бұрын
I've seen a lot, and within 5 minutes I can tell, this guy is a natural real life teacher not just a KZfaqr. Name checks out. Love it
@user-gi3oc1kv5m Жыл бұрын
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!
@user-ir3yw8bs4i Жыл бұрын
Hands-down, one of the best teachers out there, regardless of discipline.
@swedishpsychopath8795 8 ай бұрын
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!
@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.
@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.
@gauravdaware8671 2 ай бұрын
This tutorial provides a comprehensive overview of fetch() api, covering all the essential aspects in depth. Thanks to Steve.
@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!
@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!
@Franklin7x 4 ай бұрын
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 4 ай бұрын
I can rewatch this video 10x times and I not get tired of it 😁
@diegoavendanohernandez9908 7 ай бұрын
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
@user-ih2zp9jg7f 4 ай бұрын
This is by far the most extensive tutorial about FETCH. This will be my standard issue from now on.
@chhavimanichoubey9437 11 ай бұрын
This is the ultimate video i was looking for in last 24 hours, thanks for the effort, added a star to your github repo.
@paperC_CSGO Жыл бұрын
Thumbnail game on point!
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
Figured it was time to put some effort into those. :)
@sjshdhehbesjks 3 ай бұрын
best teacher on internet thanks a lot for providing this quality content for free
@jacobwwarner 5 ай бұрын
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
@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!
@djlee0721 Жыл бұрын
Gold! Thank you professor 🙏🏼
@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.
@Aditya-gh4jy Жыл бұрын
The best Explanation of the Fetch API on KZfaq.
@chmkzt 26 күн бұрын
Thank you so much Steve. You make this so easy to learn.
@brucewayne252 Жыл бұрын
Have got a good feeling just seeing this 2 hour plus lecture ❤. That too on fetch API
@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!)
@damaniturner6510 Жыл бұрын
This is incredible!!! Thank you so much professor!
@nickrodriguez7758 9 ай бұрын
Absolutely flawless video, thank you very much!
@dimjim2365 5 ай бұрын
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.
@prashanherath9944 5 ай бұрын
excellent content ♥. A teacher who knows stuff and most importantly who knows how to TEACH. Thank you !!!
@TyronneRatcliff Ай бұрын
Awesome tutorial. Thanks!
@devynity4507 6 ай бұрын
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 6 ай бұрын
Good luck! 👍
@devynity4507 6 ай бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you for this video! Its so easy to follow, Thanks for making me move forward prof!
@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!
@hasiibali2513 Жыл бұрын
i never got it so better. really. everytime i have an issue I search this channel
@omojjegomosc8211 2 ай бұрын
Best API tutorial that I've seen.
@gagandeepdayal 8 ай бұрын
Your tutorials are always amazing Steve. Your old subscriber here 😊
@lightmanBroInnovation 9 ай бұрын
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 ☺☺.
@wick12298 Жыл бұрын
Best teacher and a great explainer!
@smilemakerb 2 ай бұрын
Awesome tutorial! Always love your videos
@usmonovdev 9 ай бұрын
extremely amazing content, Thank you so much 🤩🔥
@mikelantzelo 2 ай бұрын
Thank you very much!!!Excellent explanation
@prashlovessamosa 10 ай бұрын
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!
@pranaypaul5216 4 ай бұрын
Great content this is what i'am looking for and i found it Thank you
@Fshhady Жыл бұрын
Thank you Steve. Thank you very much my friend for the great content.
@yasminalsham5619 Жыл бұрын
Many many thanks Steve for sharing
@user-gi3oc1kv5m Жыл бұрын
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 - kzfaq.info/get/bejne/gqmVrcSpl9uyY5c.html 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.
@amirhosseinghasemi4831 4 ай бұрын
I really enjoyed it. Thank you
@iuliancarnaru954 Жыл бұрын
Great content, amazing value
@ryanwoods3333 6 ай бұрын
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 6 ай бұрын
Thank you very much!😊🙏👍
@rommeld.guerrerov.8505 8 ай бұрын
Great content and explanations
@rockNbrain 9 ай бұрын
nice job dude! that was awesome! tks a lot!
@filipivanovic9556 4 ай бұрын
this tutorial is a pure gold
@danielchazan4011 Жыл бұрын
Bless you Prof3ssor.
@eirenedelosreyes6025 9 ай бұрын
the video is very helpful and informative.
@hesamrahmani 3 ай бұрын
your amazing this video was so useful for me
@musicmeta_systems 8 ай бұрын
great video, a lot of useful info
@emmanueleban1096 Жыл бұрын
This is great boss..thanks
@yitingchen8278 9 ай бұрын
always great content !!
@246rs246 Жыл бұрын
like always best content ever
@zoropppp 5 ай бұрын
You are a Genius ❤❤❤❤
@valenciawalker6498 2 ай бұрын
Thank you!
@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!
@sayeddileri3461 7 ай бұрын
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 7 ай бұрын
Possibly at some point. I have literally thousands of videos on my todo list
@kkomax7 Жыл бұрын
FANTASTIC!
@blendshala6506 Ай бұрын
this is amazing
@kevink3072 Жыл бұрын
Thank you in advance
@user-oj3rm9lw7n 22 күн бұрын
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 22 күн бұрын
What kind of error? What is the error message? Without seeing your code I don't know what you have done wrong.
@GurpreetSingh-op3ie 5 ай бұрын
Great content! What about interceptor, can we intercept all fetch calls. If not we can always write a wrapper.
@SteveGriffith-Prof3ssorSt3v3 5 ай бұрын
There is no global handler for fetch calls. You can send an abort signal to kill a call. - kzfaq.info/get/bejne/ad-EppR_r8Ddcp8.html You can wrap a collection of fetch calls in a Promise.all( ) or Promise.race( ) or Promise.allSettled( ) call. kzfaq.info/get/bejne/ppakmLt_yM22j40.html
@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.
@Glitch-txs 4 ай бұрын
amazing!
@abdiag603 9 ай бұрын
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 9 ай бұрын
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.
@shahinza 3 ай бұрын
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 3 ай бұрын
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. kzfaq.info/get/bejne/a8djf9eZtpjcc30.html
@shahinza 3 ай бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you so much, Professor.
@joshuaachorn8327 3 ай бұрын
What font are you using? I love the style of the () characters
@SteveGriffith-Prof3ssorSt3v3 3 ай бұрын
In vscode, jet brains mono
@goffyfoot82 Жыл бұрын
Thank you ..!!
@goffyfoot82 Жыл бұрын
you have to good stuff to watch !! and a very nice way of communicating the material. Peace .....
@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
@mdsazzadhossainsiam6279 20 күн бұрын
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 20 күн бұрын
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.
@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
@nevestunga955 Ай бұрын
👌👌👌👌👌👌👌
@simonmalaret5506 8 күн бұрын
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 8 күн бұрын
XSS is a whole other long tutorial on its own.
@DeathBender 4 ай бұрын
Shouldn't we just use Observables (RxJs) or Project Reactor nowadays? Is the Fetch API (promises) still the "way to go"?
@SteveGriffith-Prof3ssorSt3v3 4 ай бұрын
Yes. Using the vanilla js core features are always better if you know what you're doing
@MRMOTOFOTO 4 ай бұрын
The thumbnail title is not a lie
@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
@navinkarki6354 Жыл бұрын
now you are getting views what you really deserve
@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
@Brad_Script 6 ай бұрын
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.
@dmwasielewski Жыл бұрын
Grate course, that's what I'm learning right now. Thank you very much!
@Anonymouzee 9 ай бұрын
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 9 ай бұрын
You're allowed to watch it in chunks. 😀
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 6 М.
ByteGrad
Рет қаралды 830 М.
developedbyed
Рет қаралды 79 М.
The Coding Train
Рет қаралды 337 М.