1.1: fetch() - Working With Data & APIs in JavaScript

Подписаться 1,7 млн

Просмотров 451 тыс.

50% 1

Welcome to Working with Data and APIs in Javascript!
This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects. This is the first video of the series!
1.1 This video is client-side only and covers the web fetch() API, loading image data and focusing on handling asynchronous events with Promises (async / await),
🎥 NEXT LESSON: • 1.2 Tabular Data - Wor...
🎥 FULL COURSE: • Working with Data and ...
💻github.com/CodingTrain/Intro-...
🔗developer.mozilla.org/en-US/d...
🚂 Website: thecodingtrain.com/
💖 Patreon: / codingtrain
🛒 Store: www.designbyhumans.com/shop/c...
📚 Books: www.amazon.com/shop/thecoding...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

Опубликовано:

16 май 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 445

@erichreinholtz 4 года назад

dude ur like the only person in this entire bloody internet who actually explained this properly

@wesleychigbu7335 Месяц назад

Legendary comment😭😭

@jrichalot 4 года назад

As a teacher, I can say this is mindblowingly brilliant! Oh man the effort that gets in producing a seamless and well constructed lesson like this is enormous. A massive thank you from me.

@beron_the_colossus 5 лет назад

Ahh, it's finally here! Thank you Mr. Shiffman for everything that you do!

@brikimbran 5 лет назад

Due to your pavlovian training with the bell, I now smile every time I your videos start Shiff. Excellent as always.

@sankai91 5 лет назад

if only you'd have started this series about 4 years ago, it would have made my life back then so much easier! Finally got to understand it properly :)

@christopherburke7042 4 года назад

I am massively appreciative for everything that you are bringing to the table in this course, as well as by way of all the other resources you provide. God bless you man.

@onurbamaro 3 года назад

Wow! Amazing the way you explain how the code actually works behind the scene instead of just showing it. That is real teaching! Respect from Brazil!

@JoSh-yu6jt 4 года назад

You are the god of programming tutorials. Your excitement and joy is contagious. If there was a person who could give birth to webDevs it's you. 😁👍🏻

@thomaswilliams495 4 года назад

I absolutely love your tutorials. I'm astounded by how quickly you cover the information, jumping into code, error fixing, and rambling over so much territory with joy and humor. Math homework has never been this much fun!

@KanagawaMarcos 5 лет назад

One of the best coding channels out there. Amazing video Shiffman, thank you for it!

@Xerxes17 3 года назад

Bro, you are a lifesaver, thank you so much for the well delivered tutorial. You've provided the full context, focused on the function clearly, and chunked up the steps involved in an understandable and logical manner, which is really important for true comprehension.

@temzeks 3 года назад

i always head straight to your videos on any topics i learn, because of the way you explain and energize me. I am literally happy while watching your vids!

@jamesa. 5 лет назад

Just in case you confused like I was- "rainbow.jpg" is a file on his computer, so you just navigate to an image on your computer too.

@HossamKhalaf-sr1oo 4 года назад

Thank you!!!

@hkar19 4 года назад

the thing is for me the fetch API cannot load. i just did what was written by Dan. the console said: URL scheme must be "http" or "https" for CORS request.

@hkar19 4 года назад

oh ok it is done when i started the live server. i forgot that one

@laalaajonsen 4 года назад

but where do we define the path for that file?

@medilies 4 года назад

@@laalaajonsen "rainbow.jpeg" is a relative path Liveserver does load all the workspace (project folder ) on the network! So suppose that that the project folder is: Project ( index.html, img[ rainbow.jpeg ] ). Fetch with absolute path is like : "localhost:5500/img/rainbow.jpeg" Or with relative path is like: "Img/rainbow.jpeg"

@brysontai5107 2 года назад

As I am new in Javascript, but this guy could deliver precise explanation about it. Subscribe is a must !

@pablovillaverde679 3 года назад

I am finally able and happy to report that I was able to write code to fetch an array of images and put them in a web page. I was also succesful to fetch the text in a .txt file. I have a good understanding of HTML and CSS and a few weeks of learning Javascript, so my next goal is to construct a web page to display analytic and historic information of Formula 1. There are a couple of API's available that I can use, so wish me luck!

@josepharcher9750 5 лет назад

You are so good at explaining everything! Thank you for the video :)

@landtechjobs 2 года назад

This is the type of content that pushes humanity forward. Thank you for empowering others.

@Tads552 4 года назад

Im showing this playlist to EVERYBODY! Congrats on the effort because this is helping me out a lot!

@warkentien2 2 года назад

I finally understood fetch, in a way that I won't forget in 30 minutes. Great video!

@amastou4634 4 года назад

Amazing ! Just discovered this channel because I was looking for how to use fetch and async, I understood all that stuff in this video. Thanks !

@Savdmyfamilyfromgaza Год назад

I like how he made everything fun, even a person with no programming background can understand his explanation... I wish they taught me this way from the start

@jorge88824 4 года назад

Basic concepts explained in an amazing way. Thank you once again for the great content and way of presenting it to the youtubers. You boosted my knowledge more than a whole semester at uni. Stay safe.

@PotatoLover1212 5 лет назад

I love you. I have been searching for an easy way to retrieve an image from API and everyone was converting it into a base64 text. This si much easier, thanks !

@lukask6066 5 лет назад

The first time I really understand promises! LIKE!

@whydoyouneedmyname165 5 лет назад

even adds async/await in first video this guy is the internets end boss. good work.

@axeljorgensen3438 3 года назад

After like 5 other walkthroughs that left me feeling stupid I'm realizing how poorly almost everyone else explains this stuff. Props to you for being a good teacher. Thank you.

@unclegood 3 года назад

just came across your youtube videos, you have the most fun and vibrant coding lessons, and a teacher all children should have!

@JorgeArias 5 лет назад

This content and tutos are just, GOLD!

@iamsachin619 3 года назад

Man what did we do to deserve a teacher like you❤️

@lollilolli4582 2 года назад

I like the happy energy you deliver so coding is less depressing :) thank you !

@rotrose7531 5 лет назад

Thank you, this concept is not easy to understand, but you explains it so clear that everybody can understand it now. Thank you for your effort and sharing.

@123saltgaming6 2 года назад

The best possible explanation that is available on RU-vid 👍👍

@nate1988 2 года назад

This is the first video of yours I've stumbled on and it's the best yet to break down fetch() with the added bonus of await/async. I'm a self-taught adult student and it's hard finding a teacher that clicks. Subscribed and looking forward to diving into the rest of your videos.

@joshsinger8 Месяц назад

Such a great teacher, not even fully into the series and I can already tell I'm in good hands 👍

@movieclips3268 4 года назад

one of the best video to explain js in the most simple way.

@tunafish9112 5 лет назад

I love your videos dude, can't wait to go through this series!

@devadharshini1122 3 года назад

i have never enjoyed while learning something. You are soooo good in explaining stuffs.

@bernardsamapoh3619 Год назад

Really like your style of teaching. You simplify concepts to the basic.

@ismailahmad9597 2 года назад

This stuff wasn't really setting right with me before. You helped me figure it click for me but that wasn't the best part of the video. You make it fun. Life doesn't have to be boring, why not make it fun? Thanks a ton!

@KennieDevCamp 4 года назад

Your tutorials are super duper awesome Mr. Shiffman. I'm learning and loving your contents. Keep it up

@alperenozkan 5 лет назад

Thanks 🙏 I really like your videos , your energy and the way you explain in front of the whiteboard. I feel like exactly in the class 💫👌

@kevintlu 5 лет назад

Finally Dan has done this! Thanks ! Keep it up!!

@nirajdeshmukh7514 Год назад

Wow.. this tutorial is perfect to context which gives real world example. Thank you very much.

@jordanlong5354 4 года назад

Working with fetch and .then in my bootcamp. This helped me tremendously thank you so much

@maltemichels 4 года назад

You're a magician. You really found your vocation!

@softmerit25 2 года назад

Seriously man. This is the best tutorial training I have ever seen in RU-vid so far. I'd love the way you teach, explain and illustrate. You're really doing great stuff. Thanks a lot.

@colindante5164 2 года назад

Would you happen to know what does 'img elt' means at the 8:55 mark ?? I've never heard of " ELT " before. Thanks a lot.

@omkarpabe7780 2 года назад

where to get the rainbow file from ? where is this server please I am new to this

@colindante5164 2 года назад

@@omkarpabe7780 it could be any file off the internet or stored locally. In this case he's using an image off the internet that has the .jpg extension.

@nikolebianchini 3 года назад

I just love how he reminds me of my 6th grade teacher, like he literally has that same enthusiasm! Makes me really want to learn JS. Such an awesome job at keeping your viewers attention. I kinda wander off when learning on my own lol

@hiryuimajin 5 лет назад

I enjoy your videos so much. This is so related to what im building and the way you explain things are very good. You enunciate and even the tempo is a bit faster its not that hard to follow. I appreciate you! 😘

@AlThePal78 2 года назад

You are my favorite teacher because you are so fun to watch so happy and animated thank you so much :)

@trashmoneyyt 4 года назад

To be honest I'm amazed I was able to do it! I sort of followed along while you were explaining the await and blob concepts but I actually managed to get three rainbow images to display plus the text. Woo!

@JeanLuemusic 2 года назад

I feel like I am there in the class. I get him and what he is saying so well. Learning just got easier for me.

@PavelPetrasuk 4 года назад

You are the best teacher ever! Thank you so much for your videos! ❤️

@hcgreier6037 Год назад

A massive thanks from here for your instructive lessons and your effort you're putting in this! Bow!

@drophy 5 лет назад

Sounds interesting! Really looking forward the next video!

@onedimensionalchess4373 5 лет назад

Very excited for this series.

@andreask_me2683 3 года назад

probably one of the best programming teachers.

@sudhanshusharma9123 3 года назад

How does it happen that whenever I am stuck at anything and cannot think of any solution at all, you just completely solve my problem and make me a happy person again. ❤

@futincrivel Год назад

This is a BRILLIANT lesson! Its very good. Thank you

@santiagocuadra1121 Год назад

i'm glad to know english, just to say: thank you for all effort put on those videos.

@weehagaming1513 3 года назад

Finally some high quality tutorial, thanks dude

@thedonsky5092 3 года назад

This guy is awesome, Wish there was more time in the day to watch all his videos

@nilsondelaossa4052 7 месяцев назад

You are my code hero. Nobody explains so easily like you. Choo choo !

@maksim7683 4 года назад

I just want to say, you are the best.

@art0van0derlay Месяц назад

What a fantastic teacher! Keep up the good work

@pysco11 Год назад

This is soo informative and well done! I love your enthusiastic voice tone. I can't thank you enough. 👍🏽👍🏽👍🏽👍🏽👍🏽

@AlphastepMusic Год назад

I've been looking for this for a very long time!

@emarroqu100 3 года назад

This is a great tutorial - thank you. I admire your teaching style.

@paulosilva-dm1qb 4 года назад

U r a genius and teaches with heart. What else can we need?...Alll happiness

@cloudstrife6399 4 года назад

You're a master! Thanks for sharing you're knowledge!

@francoisbouchet9907 3 года назад

i'm sorry, but the n00b in me has to say it loud... so here comes the CAPS: "IT'S BEEN DAAAAAYZ I AM STRUGGLING ON GETTING A SIMPLE API CALL TO JUST WORK AND LITERALLY NOBODY BUT CODING TRAIN TOOK THE TIME TO EXPLAIN & DEMONSTRATE IT IN A PRACTICAL MANNER (..and with such enthusiasm!) ! I FINALLY UNDERSTAND HOW IT WORKS! ALERT("THANK YOU SO SO MUCH!!

@rankostevanovich2496 4 года назад

The best teacher! Thanks for your awesome work

@bgb76 3 года назад

the magic of FETCH-ing starts from 11:18 ASYNC & AWAIT --- awesome

@cass_666 3 года назад

Was coding along and I too kept on mispelling response too! Ahhh! Great tutorial. I enjoyed the challenge at the end which pushed me to make sure I understand how this all works! Looking forward to the rest!

@vahidsediqi5638 2 года назад

The best content and teaching method i ever seen. Thanks

@doremon2611 4 года назад

Thanks man, keep spreading the happiness of coding!

@rotrose7531 4 года назад

Thank you for these incredible stuff, they are the very thing I want.

@sarthakkhare4600 4 года назад

I am new here and i came here to learn about api and i am damn sure that i will definitely learn too much from you Sir

@MrPipero96 4 года назад

Exceptionally explained! Thanks

@hustler212 10 месяцев назад

I feel happy while studying from you.

@akai746 4 года назад

Just the perfect course for my project. It's due on Tomorrow, hope I can complete it. This course has made my work much easier.

@benoitb.3679 3 года назад

Hope it went well! :D

@jaypostsvideos4011 3 года назад

lmao same reason i'm here too

@traezeeofor Год назад

Thanks for this video man, and grateful for google for linking it as 3rd option for beginners looking for practical fetch API lessons.👍

@QuarkGluonPlasma137 Год назад

Dude you are amazing!! Fantastic video!

@englishwitharash 3 месяца назад

you did really well. You said what we needed exactly.

@Igoreus82 3 года назад

You are an amazing teacher! Thanks so much!

@camilovega4914 2 года назад

You are a great teacher! Many thanks for the lesson

@hELLoTS88 4 года назад

Damn! this guy explains really well! I was getting confused by all those .then and thanks to your video I got it clear

@abazur7742 5 лет назад

Im hyped for next vids

@ibrahimagueye8256 5 лет назад

You're awesome Dan keep making awesome tutos!

@tiffanygibbel3767 Год назад

You and your channel are *brilliant*

@matissjudins6272 2 года назад

ur a god, beem strugling with fetch for a week, its easy to understand u

@TheCodingTrain 2 года назад

Glad to hear!

@usurpercries Год назад

Been coding in C the past couple months can’t wait to come back to JavaScript.

@TheCodingTrain Год назад

I'll be here!

@arindam-karmakar 2 года назад

WHY DIDN'T I FOUND YOUR CHANNEL EARLIER! SUBSCRIBED! Thanks for the amazing contents!

@magicweaponr072 5 лет назад

You've mentioned "arraybuffer" at some point during the video. And I'd like a video with raw binary data manipulation and/or typed arrays. It is truly one of my dream videos that I would want to see!