4 ways to make an api call in JavaScript | Http requests | JavaScript Tutorials

In this video, i will show you how to make an API call in javascript
In JavaScript, it was really important to know how to make HTTP requests and retrieve the dynamic data from the server/database.
JavaScript provides some built-in browser objects and some external open source libraries to interact with the APIs.
source code here github.com/jay...
Here are the possible ways to make an API call:
XMLHttpRequest
fetch
Axios
jQuery
XMLHttpRequest
Before ES 6 comes out, the only way to make an HTTP request in JavaScript was XMLHttpRequest. It is a built-in browser object that allows us to make HTTP requests in JavaScript.
JSONPlaceholder is a free online REST API that you can use whenever you need some fake data.
By default we receive the response in the string format, we need to parse into JSON.
XMLHttpRequest was deprecated in ES 6 by the introduction of fetch. But still, we are using XMLHttpRequest when we need to work with old browsers and don’t want polyfills.
Fetch allows you to make an HTTP request in a similar manner as XMLHttpRequest but with a straightforward interface by using promises. It’s not supported by old browsers (can be polyfilled), but very well supported among the modern ones. We can make an API call by using fetch in two ways.
The fetch API is very powerful. We can easily send AJAX requests using the browser fetch API. The major disadvantage of fetch API is error handling.
Axios
Axios is an open-source library for making HTTP requests and provides many great features, and it works both in browsers and Node.js. It is a promise-based HTTP client that can be used in plain JavaScript and advanced frameworks like React, Vue.js, and Angular.
It supports all modern browsers, including support for IE 8 and higher.
Installation:
If you are using any one of the package managers like npm or yarn.
The following are the advantages of Axios
Axios performs automatic transformations and returns the data in JSON format.
Better error handling
Axios has a wide range of supported browsers.
The $.ajax method takes many parameters, some of which are required and others optional. It contains two callback functions success and error to handle the response received.
Conclusion
Most of the real-time applications are using Axios to make HTTP requests. Axios is a very easy and an open-source library for making HTTP requests.
I have covered the most popular ways to make HTTP requests in JavaScript.
jQuery
jQuery has many methods to handle asynchronous HTTP requests. In order to use jQuery, we need to include a source file of jQuery, and $.ajax() method is used to make the HTTP requests.

[@alangamer50]

Man thanks, I spent a good 2 hours figuring out how the fuck and HTTP request works and you come here and explain it flawlessly in 10 minutes

[@archangel4894]

Your channel is not named Code Pro for nothing, this tutorial gives me a better understanding on how to make request on API. Please keep making quality content like this one.

[@CodePro-Jayanth]

Thank you ❣️

[@arcosd63]

This demo was awesome! Down to the point, no waste of time , it all worked out perfect! Thank you Code Pro.

[@jayanthbabusomineni557]

Thank you

[@educationaltechnology8363]

I spent a month watching countless videos about asynic await to find a solution for this and you made it in one video
Thank you

[@seenus.k7330]

Great explanation thanking you sir

[@nishatislam3495]

wooow! best video

[@CodePro-Jayanth]

Thank you

[@diofaro]

This was so easy ! Because of the way you explain it!

[@jayanthbabusomineni557]

Thank you for your support

[@TruthSeeker3758]

Thanks, got clarity on difficult topic. Short and sweet.

[@kaushalkumar.1757]

Nice video

[@cdesino9815]

helps me a lot how to use console. Thank youuuu!

[@CodePro-Jayanth]

Thank you for your support

[@qlmdev]

Great! Thanks!

[@DG-cd3jb]

It’s very informative. I have a usecase to call the address api from the html and load the json responses in the web form dropdown field ?

[@nidhinm3301]

Bro its so compact and call concepts discribed very good. Thanks

[@navinbadlani9211]

Great tutorial 👌 👍 keep it up

[@haos4574]

Nice tutorial! I didn't hear the last bit clearly, do they all use xhr request underneath the hood?

[@prasanthganesan8829]

very nice tutorial. Keep it up

[@CodePro-Jayanth]

Thank you

[@abubakarmohammed9280]

@@CodePro-Jayanth You are good. A very good one. Thank you.

[@vlmo]

This was so simple and clarify!

[@TheCacoVenom]

good thing man

[@varuncharan9109]

What is preview and payload in inspect ir chrome Developer tool
Can you make a video on that

[@shashankdeep403]

Can you please help me how to use api compiler.

[@Usertubcdhnvxhkn]

super explaining skill. i really thank you to for this video, same as how to post data methods in these 4 methods can you explain

[@CodePro-Jayanth]

Thank you for your support. In future, I will make the video on post request as well

[@sipwhitemocha]

Could someone teach me how to run this request.js file on a browser? Did he use Node.js or something?

[@md.mohiuddin]

Thanks a lot.

[@curryzhong3660]

nice, but u should have request.onload before send

[@Succuub]

it is not working i get Uncaught ReferenceError ReferenceError: XMLHttpRequest is not defined

[@CodePro-Jayanth]

which browser you are trying to make an API call?

[@s0ulweaver]

Hard to understand for beginners to JS, thankfully i knew enough to not have my time wasted

[@rishabhgautam4925]

I think you love chess!!

[@s0ulweaver]

@@rishabhgautam4925 correct

[@Potenti4lz]

I feel he is talking at x1.5 speed by default 😂

[@nobody-ek3hk]

6.31 axios

[@johnthomascaballero]

you fast forward your voice bro? haha

[@florinmarcus]

when you write an article and you post code as image, it means you're lazy.

[@raushonmunni2633]

what

[@arlandmv4053]

how about doing your own work?

[@Cyrus_G]

thanks to you, console.log() is now my new bestfriend. xD