2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript
HTML-код
- Опубликовано: 26 авг 2024
- 💻github.com/Cod...
We are now in Module #2! In the previous module, we focused on client-side JavaScript. We now will learn the basics of server-side programming with Node.
2.3 Let's take data from the client and send it to the server. This video covers routing, JSON parsing, and HTTP POST requests with fetch().
🎥 NEXT LESSON: • 2.4 Saving to a Databa...
🎥 PREVIOUS LESSON: • 2.2 Geolocation Web AP...
🎥 FULL COURSE: • Working with Data and ...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
My day is always better when I see new Coding Train videos.
Is he your dad??
You can not imagine how long i searched for such a tutorial. Thank you. Just Thank you.
Me to this is great!
This guy seriously makes the best tutorial content on RUclips. I've learned SO much, all thanks to this guy. His videos are legit worth $1000s in semesters at my university. And no pressure of being graded!
I've seen several instructional videos from you and I'm still impressed by the clarity of this despite the fact that you're very quick, but clear about what it's all about.
Sometimes it looks like an Attention Deficit Hyperactivity Disorder (ADHD), but this is a natural gift in your case.
Thank you very much and go on with it.
This was the most comprehensive nuts-and-bolts explanation of fetch API I could find. Most other videos don't even come close. Thank you.
oh just great. I tried learning this and googled questions and tried it out for an hour. And then when I finished I saw this video.
THanks youtube.
I've struggled with this for weeks. And finally, I found The Coding Train videos and they made it all so simple. Thank you man!
Learning back-end coding at the moment. These videos are seriously awesome. Well-taught, good production, and helps so so much.
Can I just say. I first started coding about 4 years ago as a hobby, these videos were always a constant source of joy and fun for me back then. I'm now a full-stack dev at a blockchain based startup, 4 years later I still love your videos. THANK YOU!! :)
I have been struggling with this server side stuff for DAYS, i go to coding train and 20 minutes later i know all i needed and been trying to learn for so long. You sir, are incredible
I have no words, stumbled upon this and learnt quite possibly the most important way of client server interactions I have been trying to learn for months.
Great clarity for a person who really struggles to comprehend concepts delivered by stackoverflow people, you put it visually, legibly and repeatedly so the audience can review, re-review at their own pace. Thank you for helping everyone.
I have watched this video so much for when I need help on fetch's! You are an invaluable human, thank you for your brilliant work!
Realllly man... Tonsss of thanks❤️❤️❤️❤️❤️🙇🙇.. after browsing through the internet, after going through several post cannot figure out this simple feature, that u explain in this short video.. i am really glad 😊
I love the way u teach and the happiness u display, makes me remember when I was still a kid, thanks for that enthusiasm, smiles
Your videos are so useful for me.
I have learned a lot about javascript through your videos.
Thank you
This guy is the best teacher heaven has sent for developers 😊
Unfortunate this Video has only ~80k views. The Best Explanation ever.. I kind of love coding now because of you . Thank You so much
The way you explain things makes me fall in love with coding. thank you so much.
Coding Train guy, I really appreciate your hard work. I know these videos take a lot of work to produce and you are the best for putting these out here. Also, you should say your name more, so we can buy your book!!!
so easy to understand. after so many hours of finding my mistake and failing you saved the day. thx sir
Man, I'm getting crazy just to understand what headers are, but this video made many things clearer to me than I expected!
This video is simply amazing!!! I finally understood how the server and the client communicate each other, which I couldn't understand for more than a month in the course where I paid 800 euro!
Thank you, Daniel! Your energy and charisma are priceless. Getting mood and knowledge :)
This series is super. I have been working on a project that is using these things but I didn't know how some parts of this project work. Awesome! :)
This is the tutorial I have been looking for. Thanks a lot! Love everything about the tutorial. Including the new haircut!
Just found out this channel, I could tell you're a GREAT teacher, thank you for this simple explanation!!!!!
after days of post tutorials finally i understood .thanks bro
Wow I did not know how much I needed this! You actually make learning fun! Thank you so much :) My classes are very dry and boring in comparison.
You are heaven sent, thank you! best node.js teacher on RUclips by far
Honnetly i dont speak english very weel and it the same to leastening somebody speaking quicly in english, but your video make me understand how node and api communicate. So thank u so much
It's a beautiful day in the neighborhood, a beautiful day in the neighborhood, won't you be, my neighbor... sorry, love your tutorials but you reminded me of a childhood memory within the first 1 second of this video... LOL! had to comment (Mr Rogers if anyone remembers [Canadian TV show]). lol
Spent two hours trying to figure out why req.body was returning undefined before coming across this tutorial... Thanks for making it
i am still getting undefined wtf?)
Every time I watch your video, I feel lucky for whatever reason!!!
Off the bat, I love your teaching style. Very clear.
your classes are so much fun! congrats on being so didactic
not sure if you truly mean 'didactic'?
Dear you are great Teacher and your teaching style best for any student who just come to your channel.👏
Very nice video, I searched a long time for a video like this. Thanks!
I had trouble with the POST fetch request when using live server.
If you are having the same problem open "localhost:3000" in the browser instead of using the tab that live server uses.
THANKS!!!!!!!!!! It was making me insane - what a trooper!
I am a student from Uganda learning react Native. But I was looking for away to deal with API and now I have learnt thanks to "What does it mean to be a bubble?". Thanks
I cannot thank you enough for this, it has helped me with my personal projects so much.
EXACTLY what i needed. Firefox didnt like how i passed the information through i guess. Works now thanks to you!
just what I was looking for, thank you for this video!
Quick question. I did every video step by step up to this point and i always get this error:
POST 127.0.0.1:5500/api 405 (Method Not Allowed)
Can someone help me about this? I am trying for a month now and I am hetting nowhere.
I've downloaded your code as well and the error is still there. Please help!
I had the same problem and so I made a directory(folder) called "api" inside the same directory as index.js. It seems to have solved it.
Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
Great video every time i re-watch I pick a little more
Glad to hear it!
Man, you are awesome. I'm from Brazil and I always excited when youtube sugest to watch one of your videos. I have learning a lot! Thanks
By the way, nice haircut. ;)
I had some udemy courses on node but your videos have a different taste 🙂 I am glad you exist 😄 thanks for everything
'API' instead of 'Rainbow'? my my.. that haircut has made you too sensible!!
:) Great video as always
!!!!Important: I did all kinds of things and could never get body-parser or the new express.json() to work... And I finally figured out the problem was caused on Postman's side !
I was sending a RAW payload and it was being sent as Text instead of JSON ! I changed that to JSON and everything worked 😊
Hope this helps 😄
Uhuu, after 4 days of lazy work i finally finished the exercises that he proposed in the video :D Ty Daniel
I owe you a coffee for the help. This POST/GET things is killing me in my learning adventure!
The way u introduce node was so helpful for me thanks alot man
Thank you for USE this type of teaching technic. Love From INDIA
This is guy is so damn energetic. Makes things fun
I still didn't see the video. But that background already transmits me good vibes haha. Thank you!.
Followed the video step by step but im getting a 405 error saying method not allowed for my fetch api, any fix for this?
The same. Have you found a solution?
@@Devilman91 Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
this channel and the net ninja channel are just crazy filled with information 😍
Love the bell at the beginnings :D
Great stuff as always!!
Awesome tutorial, best teacher ... ever ...thanks a lot !!
man, those headers always get me. Thanks for the video!
They are great videos, I have learned a lot. I followed your instructions step by step but I couldn't save it to a database. spent the whole day again and again but no luck !
Really appreciate your approach and enthusiasm! Makes understanding this stuff easier, for sure. Great content and explanations. Thank you!!!
damn! i missed the express.json() in app.js and struggling all day why I get undefined in console .. u saved me now dude! Thanks a lot
That really made my day cleared all my queries.. Thanks Love from India
Your video helped me a lot in my college project works. Thanks a lot😉
You make everything so understandable!
Great tutorial and explaination! Thanks! That space indentation makes me uncomfortable though.
Im searching for this from the past 3 hrs. Thank u so much
great hair cut Dan, loved it! nice to see your quotidian jokes always!!
My day always better when I code
GOoooD, you saved me lol.
Hello from Mozambique here! :D
I'm so so so grateful for this channel!!!
When i wrote fetch('/api', options); in my index.html file and refreshed the page, it said 405 Method Not Allowed. Is there something wrong in the server side that does not allow the method POST?
same thing here. Did you find what was wrong in your case?
Add another header in the object that you are posting using fetch...
mode: no-cors. This should solve it
@@rijuban4321 it didn't work for me, but thanks for trying
Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
@@sebastiaanvv Ok, I found the solution for the ERR_ABORTED 405 (Method Not Allowed)
The error appears in the console of our index.html file when accessing the file DIRECTLY (in my case via VS Code - Live Server). By accessing directly to the file we somehow bypass the server logic or functionality.
In order for the correct Server-Client functionality work we must enter the server via the URL "localhost:(whichever port its listening)" and as a result, the server will display the index.html and all the fetch functionalities should work. Cheers!
Thank you. you saved my life.
finally i found this after thank u so much I was very confused how fetch works
Thank you so much, this is what I was looking for and of course you had a video on it.
Jeez Louise, and I thought XMLHttpRequest was confusing!
This one's going to take some digesting.
where have you been all day of my life????????????.. .I've been looking for contents like this all my life, this on at 7:00
is fetch() not valid because when i use it.It give me error "this method is not allowed"?
If someone know please reply
I am facing the same issue. **
@@adeelahmed9632 me too. help guys~~
@@adeelahmed9632 un install the node LTS version if you install and then install the current version of node the it will work fine
@@timefly6804 uninstall the node LTS version if you install and then install the current version of node the it will work fine
Coding Train is great, but I keep wondering why Dan never runs into any CORS problems. Half of the fetch() calls I am making result in "Cross-Origin Request Blocked" errors. Extremely frustrating, as the documentation about CORS I have found so far is written in languages I don't understand, probably Sumerian or Etruscan.
In all of my examples here I am making the request to the server hosting the code, so there are no CORS errors. I should DEFINITELY address how this works more in future videos!
@@TheCodingTrain Thanks Daniel. I think I have figured it out by now, like a grown-up, but it is indeed confusing for a newbie. Especially when I get a same-origin error when innocently fetching something from the local filesystem (video 1.1).
thank you very much you fixed my problem
It is always a pleasure to watch your video. I appreciate the fun energy and vibe you bring to teaching. You should look into paid teaching platform like udacity and udemy.
very good tutorial and just subscribed. Looking forward to your machine learning courses :)
Thankyou so much it is very helpful🎉
You are GOATED man, Thanks
That was insanely helpful...
Really don't understand why I just get empty brackets at 9:55. Body is populating in options on the client side, but it's not being set to the server side.
You’re amazing at teaching 👏👏👏
amazing video man, its exactly what i was looking for 👍❤️
This video saved my life. Thank you so much :')
thanks a lot sir
I'm having a small issue. I can't get the data to transfer to the next page and I don't know how to fix it. My body is just constantly empty.
Mine too, have you found what causing the problem?
Also 'app.post' is flaged as "unresolved" in my Webstorm, I'm not sure why.
Yeah same here... if anyone of you solved this problem, then please send the solution
I had the same issue. It was a problem with my header.
@@tdsimpson Me too, I write 'header' instead of 'headerS'
Thanks. I like the FormData constructor and good old XMLHttpRequest for post, I should try fetch.
Thank you for this great tutorial! I am a complete newbie on backend work and this really gets me started!
I'm a bit to late, but i figured it out.
you need to change the fetch to this.
fetch("/api", options).then(response => response.json()).then(response =>
console.log(response)
);
This guy is amazing!! Great video!!
Awesome haircut, awesome video! :)
You are the best! Please, can you tell when you can post next step of this beautiful course?
I'm posting about one video per day now for this course! If you subscribe and click the alarm bell you'll get a notification.
"fetch API cannot load file:///api. URL scheme "file" is not supported." why am i getting this error and how can i solve it?
No se inglés y me entró de poco, pero están geniales los videos
Hey, I've got a quick question.
When we first console.log'd the request, we got all of the data and it worked well, but when we specified request.body it didn't work anymore?
You said that we needed to add the ability to parse any incoming data. How come the server was able to parse everything, but needs extra syntax when we want something more specific?
Thank you for the great videos, these are really helping me out. I love your personality.
I was wondering the exact same thing... considering all that data was also in json format
Server did not parse the initial request data it just printed out whatever it received which was already in json format from client side but when we said request.body server had to parse it.