API Tutorial - Fetch Data with Axios - (Example in React)
HTML-код
- Опубликовано: 11 сен 2024
- Tutorial on how to make API calls to fetch data using axios. I'm using React in this example, but you'll know how to use axios anywhere 👍.
Hope it helps!
Feel free to say hi 👋:
twitter: / techcheck__
blog: dev.to/techcheck
IG: / techcheck__
Thanks for watching!
-Andrew
❤️ Buy me a coffee/say thanks/support the channel ❤️: www.buymeacoff...
Affiliate links to some of my gear 🤘🙏❤️
(Best quality for the best price from my research)
Awesome Accent Lights 😎: amzn.to/3UCaHvO
Maono Microphone: amzn.to/3SxAVN6
Logitech Webcam: amzn.to/3OyIORm
Rival Mouse: amzn.to/3OwYFzG
Wrist Pads: amzn.to/4bplhfn
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
you're a lifesaver man. it's such a pain in the ass finding a simple, straight to the point video. this is exactly what i needed, thank you
Got you! I'm very glad to hear that. Thank you for watching and for the awesome comment
It's 3:38am this is the only striaght to the ponit video I found. I can finally get some sleep. Thank you for your work .
Haha way to stay at it! And thank you! 🙏
Factss
Same here. It’s 03:56 ☺️☺️
The same with me 😁
dude you made my day , " i have been falling for 24 hrs { thor : ragnarok loki reference } " with the same level of his frustration {loki} , cause i haven't been able to understand async await , fetch , try , catch , and the axios, i don't understand why there are so many ways man .... dammm these past 7 minutes are by far the most important 7 minutes in my entire 1 month of trying to understand api journey so far, all the big youtubers teach for super advanced devs but none of them know that 90 percent of their fan base are new / junior devs who are starting off and there is so much data out there that things might get overloaded that we end up not learning a very important skill. thanks mate. you have a new sub !!
Wow that's so incredible to hear and totally made my day! That also makes me feel very inspired to make more videos. Next few are dedicated to you my friend! So glad I could help! And funny reference 😂😂
Not gonna lie i probably watched thousands of tutorials on different subjects, and this one might be the coolest
Thanks so much! 😎
well explained. Thank you! Much love from Ghana
Thank you! 🙏 Glad it helped
I need to sell axios to my company's project's architect as a better way to fetch data, you helped me a lot. Thanks.
@@tomasburian6550 awesome to hear! Thanks for the comment! Glad it helped
Great video! very well explained and I like the example with the button, it makes it easier to understand for beginners like me
Love to hear that! Glad it helped and happy coding!
I am from Africa , Ethiopia. Bro i'm so proud to you! you're very amazing for me in all of your tutorial videos. I had started this tutorial 1-15 parts & now i finished it. GOD bless you
& also i will be your members !!! keep it up wow.
Thank you so much!! 🙏
Damn everything I needed in tenminutes with no bull! Subscribed!
Thanks!
"pretty much the most inspirational thing I've ever heard in my life" 🤣 great video man 🙏
🤣 Thank you! 🙏
You, are a god send. Seriously thank you so much for this.
Hahaha my pleasure! Glad it helped!
Need more content. This Chanel is good. Thanks for straight forward stuff.
Hell yeah! Thank you!
thats deep && pretty much the most inspirational thing i've ever heard in my entire life
Life changing, really 🤣
It's awesome. Straight to the point. Thanks man!👍
Glad to hear! My pleasure!
Heyo best Axios tutorial hands down in a short time.. thanks man🖤🖤🙌🏾
Wow, thank you so much! ❤️❤️ Glad it helped! 🎉
Such a simple and on point explanation of the topic.Great work.
Thank you!
That cracked me up. "That's deep". Thx for a terrific vid
🤣🤣 My pleasure and thanks for watching! Appreciate the comment 🙏
Nice one. Top G 🔥
Thanks!
Best video in the world😁
Haha thank you! 🙏
This is so detailed and clear and succinct.
Thank you! 🙏
To the point loved ur content
Thank you! 🙏
Excellent straight to the point video
Thank you! Glad you liked it 👍
its 2AM in the morning, I was thinking to go sleep. But then I read the final quote "Once you choose hope, anything's possible"
@@arsh2544 haha 💪
Dude, your content is precise 🔥
For ur work - Subscribed 🔔
Thank you so much! Glad you like!
quick and easy. thanks
Glad it helped! Thanks for watching 🙂
amazing tutorial, clear and no in your face bs.
Thanks! Got chu lol 🤘
While watching this video, I was just smiling 😁. Thank you. BTW, I'm also subscribing now!
Thank you so much! 🙏
Solid tutorial man good job!
Thank you!
Good, simple, understable thank you bro.
My pleasure! Thank you for watching!
Amazing straight to the point video. Thanks.
Thanks for the comment! Glad it helped
to the point and simple...thanks a lot
Thanks for the compliment and thank you for watching
As everybody said, excellent tutorial.
Thank you!!
Straight to the point, I’ll buy you a Lamborghini one day
Haha hell yeah! Looking forward to it, thanks!
This helped me a ton! Thanks so much.
Glad it helped! Thanks for watching!
This was deep.
Thank you
Haha no problem 🤙🏻
You are awesome.... I needed this for a project and you helped a lot. I just need to find out how to resolve CORS policy on my api right now 😅
Thanks! CORS policies are always such a pain 😂😭
Thank you so much. this helkoped me a lot
Awesome to hear! Thanks for watching and thanks for the comment!
🤣Love your appreciation of the "deep" quotes... 🤣
🤣🤣
thanks Andrew
Thank youu!
Too good I have to Subscribe 👍
Haha awesome! Thank you!
Very nice lesson. Thanks for sharing.
Thanks for watching!
thank you for the video !! one question, how could i make a list of quotes from this example ?? i mean how to store each call to store in an array (let's say 7 random quotes instead of 1)
Thanks for watching! I just looked at the API documentation - it looks like you can send a GET request to the same url, but /quotes instead of /random - that will give you an array of quotes.
docs.quotable.io/docs/api/b8b96bc546285-get-quotes-with-author-details
Thanks for this
Thanks for watching!
somebody give the sloppiest head to this man for making this. absolutely fucking awesome.
@@sehjotsinghguram.1801 😂😂🎉🎉
Such inspirational content!
Thanks! “It’s deep.” 🤣
Alhamdulillah that worked for me!
@@HayrullaRuzimov 🎉🙌🎉
that was pretty simple and funny as well
Thank you! Glad you liked it
wow❤. Strating to the point. Thanks a lot.❤
Thanks for watching! ❤️
Very educative and inspiring tutorial.👏👏
Glad to hear it! 🎉 Thank you! 🙏
Great video
Awesome to hear, thanks! Glad it helped
Thank you very much :)
Dude i love you
Hahaha. Love you too!
@@techcheck3042 staying for longer for sure, i learned this in 7 minutes and i couldn’t understand it for a week hahah
Whats the difference between axios and JS fetch?
The only difference i can see is fetch word changed to axios, am i missing something here?
Axios is just easier to work with and has a lot of nice built-in behaviour like throwing errors on 400 and 500 response codes and auto-parsing JSON; you have to implement this yourself with fetch.
Axios allows you to easily create dedicated HTTP clients with headers, a partial URL, etc built in so you don't have to supply them every time; you'd have to implement this yourself with fetch. This is very useful if your application needs to talk to multiple APIs.
@@techcheck3042 thanks for the response, axios seems like a winner amongst many, it seems like i need to add it to my arsenal.
Will defo look into implementing it my learning
great tutorial
Thank you! 🙏
Can you explain the difference between axios and fetch?
They're basically the same thing with different syntax. Axios is a package that you have to install, but fetch is native to the browser so you don't have to install anything. But axios is easy to install, it's a small installation so it won't hurt, it comes with some extra features (which you typically don't have to worry about), and mainly - it's just easier to work with than fetch. Most web developers prefer to use axios 👍
i am getting an error
TypeError: axios__WEBPACK_IMPORTED_MODULE_2__.default.get(...).this is not a function
its deep😂😂.. btw video was helpful..
🤣🤣. Glad to hear it!
@@techcheck3042 wish you make complete hooks tutorials like this masterpiece 😅😇
@@suprabhatkumar5478 thanks so much! I have a video for all of the common hooks and a custom hook: useFetch 👍🍻
That's feel easy peasy 😌
That's the plan! 👍
im trying to make a weather app , and its my first time trying to fetch an api , the guy in the video uses an .env file , what is its use
The .env file is for placing environment variables. Those are variables used for sensitive data (like API keys) that you might not want to show publicly. So it'd show the environment variable instead.
I have a video on how to set those up here: ruclips.net/video/-oJ3sAthWg4/видео.html
and actually a video on how to use a weather api here: ruclips.net/video/S_py2rXNizo/видео.html
Happy coding!
@@techcheck3042 thanks a ton. I'll go watch them now
Thank a lot !
Thanks for watching!
Thnks a lot , its a great tutorial man ! Can you share the source code ?
Thank you! And sure! Once I’m back at my laptop
Why don't you use res.json
Axios takes care of that for us! 🎉
clear as fuck, loved your ending song
Thank you! Marvel Years - Check The Vibe 🤙
how to get the array values from json.
const array = [1, 2, 3].
Inside your render function you'd open a bracket to write JavaScript and map over the array. For each return of each item, you'd return html and other brackets for each data item from the array.
{ array.map(num => (
{num}
) }
@@techcheck3042 Thanks man
What about api key?
Not all APIs need an API key, but you would typically save that to an environment variable and use the env variable when/where needed.
I’m going to make some more videos for different APIs. I’ll cover API keys on one that needs it! Likely the Google Maps API 👀
@@techcheck3042 thank you
"is deep" 💀
🤣🤣
thx nigga
Yes sir!