0% found this document useful (0 votes)
38 views9 pages

4 Ways To Make An API Call in JavaScript

Uploaded by

Lokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
38 views9 pages

4 Ways To Make An API Call in JavaScript

Uploaded by

Lokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 9
WF Save it Lah 4 ways to make an API Callin JS 2) @coder_aishya a Ol JavaScript provides a few built-in methods and external open source libraries to create and interact with the API. A few possible methods to make an API call in JavaScript are: ¢ XMLHttpRequest « Fetch ¢ Using Axios library Cue] -la a WT-W4 @ @coder_aishya a oy) XML HTTP Request var XMLRequest = new XMLHttpRequest(); OTT eto alt De Re TL eA ee cele Re Bd XMLRequest.send(); XMLRequest.onload = () => { if (XMLRequest.status === 200) { Cone Gretta ee orth a pee EG console.log("Error occurred!") a Cee MC OO MG ec eet ee eB) It receives response in string format that needs to be parsed in JSON format (JSON.parse(XMLRequest.response)). ¢ It is a built-in browser object to create HTTP requests & is deprecated with the introduction of fetch in ES 6. Still, it is used when we work with older browsers. @ @coder_aishya =] 03 Fetch API fetch( 'https://api.github.com/users/coderaishya' ) .then(response => return response. json()) .then(data => { console. log(data); 2) a a eta sever aes Do checkout my post on Fetch api guide to know more e) in depth Fetch API Ultimate Guide PA reer r) @ @coder_aishya a (ey Axios ¢ Axios is open-source library for making HTTP requests with several great features. ¢ Axios works in both Node.js and browsers and is a promise-based (asynchronous) HTTP client, which even is used in frameworks like Angular and React. Axios Installation Using Package Manager ne DoD VT ai melee D ated and include it in the HTML file like Sg a gee) (MLL eC Lee ake Ee Ree La hd @ @coder_aishya a 05 Using CDN Pe eee at eM CM Cy, hee ea ee ae CeO Seat ohed axios.get("https://api.github.com/users/coderaishya" ) .then(response => { console. log(response.data); }) .catch(error => { console. log(error); 2) Sato need Pros of Axios: e Better and easier error handling & has a wide range of browser support. e Axios automatically perform JSON parsing and returns data in JSON format. 2) @coder_aishya a 06 jQuery AJAX Attach jQuery inside Html file using CDN Sema sre="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min. js" Peat ‘x Oe) Pda tsed $(document).ready(function () { Een Eas url: “https://api.github.com/users/coderaishya", a7 FC success: function (result) { console. log(result); oa error: function (error) { console, Log(error); + }) #) ) @coder_aishya a Oy) « Uses $.ajax() method to make the requests. * the $.ajax() method takes several parameters, some optional and some required. This method contains two callback functions: success and error to handle the received response easily. AQ) @coder_aishya 7 Did you find this post Useful ? (3 Aishwarya | Front end Developer as @coder_aishya

You might also like