How to Make a JavaScript API Call

In JavaScript, there are four ways to make an API call. Learn how to leverage each one to make HTTP requests and retrieve dynamic data from a server/database.

Written by Jayanth Somineni
Published on Feb. 08, 2023
How to Make a JavaScript API Call
Image: Shutterstock / Built In
Brand Studio Logo

In JavaScript, it’s important to know how to make HTTP requests and retrieve dynamic data from the server/database.

 JavaScript provides some built-in browser objects and external open source libraries to interact with these APIs.

Here are the possible ways to make an API call:

4 Ways to Make a JavaScript API Call

  1. XMLHttpRequest
  2. Fetch
  3. Axios
  4. jQuery

 

JavaScript API Call Using XMLHttpRequest

Before JavaScript ES6 came out, the only way to make an HTTP request in JavaScript was XMLHttpRequest. It’s 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 fake data.

Open code editor screenshot.

By default, we receive the response in a string format. We’ll need to parse it into JSON.

XMLHttpRequest was deprecated in ES 6 by the introduction of fetch. But XMLHttpRequest is still useful when you need to work with old browsers and don’t want polyfills.

More on JavaScript: How to Check Data Types in JavaScript Using Typeof

 

JavaScript API Call Using Fetch

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 (it can be polyfilled), but it’s very well supported among the modern ones. We can make an API call by using fetch in two ways.

More on JavaScript: 5 Things to Know About the JavaScript Delete Operator

How to make an API call in JavaScript. | Video: Code Pro

 

Method 1

Open code editor screenshot.

 

Method 2: Async and Await

Open code editor screenshot.

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.

 

JavaScript API Call Using 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’s 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 Internet Explorer 8 and higher.

 

How to Install Axios

Here’s how to install Axios if you are using any one of the package managers like npm or yarn.

Open code editor screenshot.

Then include it in HTML file like this:

Open code editor screenshot.

The easiest way to include Axios is by using external CDN:

Open code editor screenshot.

Now you can start sending HTTP requests by including the following script in your HTML file.

Open code editor screenshot.

Axios provides the following advantages:

  1. Axios performs automatic transformations and returns the data in JSON format.
  2. Better error handling.
  3. Axios has a wide range of supported browsers.

 

JavaScript API Call Using jQuery

JQuery has many methods to handle asynchronous HTTP requests. In order to use jQuery, we need to include the source file of jQuery. The $.ajax() method is used to make the HTTP request.

More on JavaScript: 8 Common JavaScript Data Structures

 

JavaScript API Call Using $.ajax()

Open code editor screenshot.

The $.ajax method takes many parameters, some that are required and others that are optional. It contains two callback functions success and error to handle the response received.

Most of the real-time applications use Axios to make HTTP requests. Axios is very easy to use and is an open-source library for making HTTP requests. And those are the most popular ways to make HTTP requests.

Hiring Now
MetLife
Fintech • Information Technology • Insurance • Financial Services • Big Data Analytics
SHARE