Тёмный

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

Code Pro
Подписаться 2,7 тыс.
Просмотров 109 тыс.
50% 1

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/jayanthbabu123/all...
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.

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

 

29 июн 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 44   
@alangamer50
@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
@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
@CodePro-Jayanth Год назад
Thank you ❣️
@arcosd63
@arcosd63 2 года назад
This demo was awesome! Down to the point, no waste of time , it all worked out perfect! Thank you Code Pro.
@jayanthbabusomineni557
@jayanthbabusomineni557 2 года назад
Thank you
@educationaltechnology8363
@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
@seenus.k7330 Месяц назад
Great explanation thanking you sir
@TruthSeeker3758
@TruthSeeker3758 3 года назад
Thanks, got clarity on difficult topic. Short and sweet.
@vlmo
@vlmo Год назад
This was so simple and clarify!
@nidhinm3301
@nidhinm3301 Год назад
Bro its so compact and call concepts discribed very good. Thanks
@diofaro
@diofaro 2 года назад
This was so easy ! Because of the way you explain it!
@jayanthbabusomineni557
@jayanthbabusomineni557 2 года назад
Thank you for your support
@qlmdev
@qlmdev Год назад
Great! Thanks!
@nishatislam3495
@nishatislam3495 Год назад
wooow! best video
@CodePro-Jayanth
@CodePro-Jayanth Год назад
Thank you
@kaushalkumar.1757
@kaushalkumar.1757 10 месяцев назад
Nice video
@haos4574
@haos4574 3 года назад
Nice tutorial! I didn't hear the last bit clearly, do they all use xhr request underneath the hood?
@navinbadlani9211
@navinbadlani9211 2 года назад
Great tutorial 👌 👍 keep it up
@md.mohiuddin
@md.mohiuddin 3 года назад
Thanks a lot.
@cdesino9815
@cdesino9815 2 года назад
helps me a lot how to use console. Thank youuuu!
@CodePro-Jayanth
@CodePro-Jayanth 2 года назад
Thank you for your support
@TheCacoVenom
@TheCacoVenom Год назад
good thing man
@prasanthganesan8829
@prasanthganesan8829 4 года назад
very nice tutorial. Keep it up
@CodePro-Jayanth
@CodePro-Jayanth 4 года назад
Thank you
@abubakarmohammed9280
@abubakarmohammed9280 3 года назад
@@CodePro-Jayanth You are good. A very good one. Thank you.
@DG-cd3jb
@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 ?
@sipwhitemocha
@sipwhitemocha Год назад
Could someone teach me how to run this request.js file on a browser? Did he use Node.js or something?
@Usertubcdhnvxhkn
@Usertubcdhnvxhkn 2 года назад
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
@CodePro-Jayanth 2 года назад
Thank you for your support. In future, I will make the video on post request as well
@shashankdeep403
@shashankdeep403 Год назад
Can you please help me how to use api compiler.
@curryzhong3660
@curryzhong3660 3 года назад
nice, but u should have request.onload before send
@varuncharan9109
@varuncharan9109 Год назад
What is preview and payload in inspect ir chrome Developer tool Can you make a video on that
@Potenti4lz
@Potenti4lz Год назад
I feel he is talking at x1.5 speed by default 😂
@nobody-ek3hk
@nobody-ek3hk 4 месяца назад
6.31 axios
@s0ulweaver
@s0ulweaver 2 года назад
Hard to understand for beginners to JS, thankfully i knew enough to not have my time wasted
@rishabhgautam4925
@rishabhgautam4925 Год назад
I think you love chess!!
@s0ulweaver
@s0ulweaver Год назад
@@rishabhgautam4925 correct
@Succuub
@Succuub 2 года назад
it is not working i get Uncaught ReferenceError ReferenceError: XMLHttpRequest is not defined
@CodePro-Jayanth
@CodePro-Jayanth 2 года назад
which browser you are trying to make an API call?
@tomytoon123
@tomytoon123 9 месяцев назад
you fast forward your voice bro? haha
@florinmarcus
@florinmarcus 3 года назад
when you write an article and you post code as image, it means you're lazy.
@raushonmunni2633
@raushonmunni2633 3 года назад
what
@arlandmv4053
@arlandmv4053 3 года назад
how about doing your own work?
@Cyrus_G
@Cyrus_G Год назад
thanks to you, console.log() is now my new bestfriend. xD
Далее
Sending JavaScript Http Requests with XMLHttpRequest
18:53
What is a REST API?
9:12
Просмотров 1,5 млн
How to FETCH data from an API using JavaScript ↩️
14:17
1.1: fetch() - Working With Data & APIs in JavaScript
15:39
Fetch API & Rendering Data with JavaScript
28:42
Просмотров 122 тыс.
1.4: JSON - Working with Data and APIs in JavaScript
16:22
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
REST API concepts and examples
8:53
Просмотров 6 млн
What are HTTP Headers in API
17:38
Просмотров 57 тыс.
The RIGHT Way To Use HttpClient In .NET
11:46
Просмотров 55 тыс.