Axios API for JavaScript: GET, POST, PUT and DELETE requests

👉 Source code: openjavascript...
⚡ Looking for high-performance, affordable web hosting for your website or app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to make HTTP requests (GET, POST, PUT and DELETE) using the Axios API in frontend, vanilla JavaScript.
#axios #javascript #vanillajs #httprequest #frontend #webdevelopment #api
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

[@OpenJavaScript]

Thanks for watching!
For more on using Axios, see our related blog post: openjavascript.info/2022/05/03/using-axios-to-make-http-requests-get-post-put-delete/

[@WewCode]

I have been searching like crazy. This is the 3rd day in a row. and youre video finally helped me! thank you !

[@OpenJavaScript]

So happy to hear that :)

[@jayceelewis_]

This was super helpful! Thank you 🙌

[@OpenJavaScript]

That's great to hear :)

[@soumadip_skyy_banerjee]

Subscribed mate!

[@dzajakeks5539]

What is the keyboard that you are using in this tutorial?
PS: If an interviewer asks me about ajax call, can I use Axios?

[@OpenJavaScript]

Laptop keyboard, German key layout.
On the second question, yes! Ajax is what you do when you make a HTTP request. Sometimes when people use the term ajax, they are referring to using the XMLHttpRequest object to make a HTTP request. But Ajax is a broader term. You are doing Ajax whenever you make a HTTP request (including with Fetch, Axios or the XMLHttpRequest object).
Wikipedia definition:
"With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page"
This is true of all HTTP request techniques.

[@dzajakeks5539]

@@OpenJavaScript Thank you king! really cool sound coming from laptop tho (:

[@OpenJavaScript]

@@dzajakeks5539 No worries!
Yeah, sorry about that. This is one of my earlier videos. I hope that the sound quality has improved in some of my latest videos though :)

[@dzajakeks5539]

@@OpenJavaScript If it's one person in every video, then hell yeah it improved!
But yeah there is quite the difference >>>

[@jamiearodi7325]

aside from the syntax, is there any advantage it has over using a fetch api?

[@OpenJavaScript]

Good question!
One potential advantage of Axios is that it handles the status code of the response for you (will trigger catch statement in some cases). With the Fetch API, you have to do this yourself. Though, whether this is an advantage or not is really a matter of personal preference.
Axios is also popular because Fetch API was not available in NodeJS for a long time, but this is now changing in recent versions of Node.
Just in case you (or anyone else reading) are unfamiliar with handling status codes with Fetch API, I show you how to do that in this video: ruclips.net/video/hOXWY9Ng_KU/видео.html

[@killiankavanagh3854]

This helped me solve my problem

[@OpenJavaScript]

Glad to hear it!

[@edkinge1531]

Thank you this is so helpful

[@sabuein]

Thank you.

[@OpenJavaScript]

You're welcome!

[@IDMarketer]

Thank you so much

[@user-zc6vc6ss2u]

Thanks it was helpful

[@OpenJavaScript]

You're welcome!

[@rotr8196]

i got require is not defined error, can you help me solve this problem ?

[@OpenJavaScript]

Yes, require only works in the Node.js environment. You need to use import syntax in frontend JavaScript or use an Axios CDN link.

[@rotr8196]

@@OpenJavaScript thanks, although turns out it's because ver 1.1, people says it has a kind of problem, downgraded to ver 1.0 and everytjings works just fine

[@viniciusm.m.7822]

At 7:00 why did u use "{ }" to wrap that function?

[@OpenJavaScript]

I was just be super careful by wrapping the handleFunction call in function scope. But it isn't actually necessary ;)

[@PolarisMyWay]

Nothing about timeouts...

[@Viralvlogvideos]

supporting by subbing you. improve your audio.

[@OpenJavaScript]

Thanks for the support and for the feedback!
Is it a particular issue with this video?
For example, would you say the audio in the following, my latest video, is any better?
ruclips.net/video/JuyUXiPqGEY/видео.html

[@m3hdim3hdi]

no 1080p?

[@OpenJavaScript]

Will consider it for future vidz.
Thanks for the feedback :)

[@sayonara3465]

The axios docs not good, its really garbage from my opinion, any library or framework need to clear docs and more explains and examples, i don’t understand the config, in their doc there’s method or something like that called paramsSerializer, this’s function in axios docs, but when im looking into open sources code i find it as an object, which means they did’t explain the library as well

[@OpenJavaScript]

I'm a Fetch person myself and now that it's natively supported in Node, no need for Axios to do GET, POST, PUT and DELETE if you don't like it!