Four Ways to Make an API Call in Javascript

In this article, You will learn how to make an API call in javascript. As a developer, you should know how to deal with HTTP requests and work with dynamic data. If you don’t how to work with API in JS, then I would highly recommend you learn about API. We are going to discuss four ways to make an API call in Javascript.

Table of Content

  • What is an API?
  • Types of APIs (Web APIs)
  • Four Ways to Make an API Call in Javascript
  • Conclusion

If you’re from a technical background you might be familiar with the term API. In case you’re not, here is a basic overview of API.

What is an API?

The full form of API is Application Programming Interface. API is like a medium between two applications. APIs are widely used by developers. An API allows third-party developers to access the data and functionality of a specific application.API makes it very easy for a service to use/exchange each other’s data and functionality through a documented interface. 

API in computers is mainly a set of defined rules that indicates how computers or applications communicate with each other  

Examples: 

When you visit www.youtube.com on your browser, a request is sent to youtube’s remote server. Once the browser receives the response, It loads the page or executes a specific task, if the request is valid.

Here, The browser is the client & youtube’s remote server is the API.

Another great example would be a flight booking site, A flight booking site such as cleartrip. Cleartrip makes use of APIs to fetch the flight details from each Airline database. Here APIs define the rules for exchanging the data between the website (clearmytrip) and the Airline database.

Also Read:12 Best Dom Manipulation Methods in Javascript

Types of APIs (Web APIs)

Nowadays, The internet heavily depends on Web APIs and There are mainly four types of Web APIs.

1. Public APIs or Open APIs,2.Partner APIs,3.Internal APIs or Private APIs,4.Composite APIs

1. Public APIs 

Public API, also known as Open API, is a type of API which is open and available for use by any outside developer or business. These APIs are publicly available. An organization may also monetize its API by limiting the number of calls.

2. Partner API

Partner API is a special type of API that is available or accessible to only authorized vendors or outside developers or API consumers. Without the rights and license, you cannot access the API.

3. Internal APIs

Internal API, as known as private API, is a type of API that can only be accessed within a particular organization.

4. Composite APIs

This type of API combines different data and service APIs.

Four Ways to Make an API Call in Javascript

1.XMLHttpRequest

Before ES 6 (ECMAScript 2015) came out, XMLHttpRequest was the only way to make an HTTP request in JS. All modern browsers support XMLHttpRequest. It can be used to request data from a web server or make an API call in javascript. 

API call in javascript
let request = new XMLHttpRequest();
request.open('GET', 'URL');
request.send();
request.onload = ()=> {
  if(request.status === 200)
    console.log(JSON.parse(request.response));

else {
 console.error(request.statusText);
}
}

Although XMLHttpRequest was deprecated in ES6, It is still widely used by developers.

Also Read : JSON in Javascript | What is a JSON file ?

2.Fetch

Fetch is very similar to XMLHttpRequest.It also allows you to make HTTP requests in a similar way but with a straightforward interface by using promises. 

Unlike XMLHttpRequest, fetch() is not supported by all old browsers. Fetch() is one of the easiest ways to make an API call in javascript. Making an AJAX call was never easier. Fetch() takes the URL endpoint as its single argument.

API call in javascript
 fetch('URL')
.then(response =>{
    return response.json();
}).then(data =>{
    console.log(data);
})

Fetch API is perfect for beginners, but you should know how to work with promises.

Also Read: Top 5 Best Free IDE for Angularjs in 2021

With Async and Await

API call in javascript
async function getData(){
let respose = await fetch("URL");
let data = await response.json();
return data;
}
getData().then(data=> { 
console.log(data)
});

3.Axios

Axios is an open-source library for making HTTP requests. You can easily make HTTP from both Browsers and Node js. It also uses Promises API. You can use it with HTML by using the CDN

<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>

API call in javascript with axios
axios.get('URL')
.then(response =>{
    console.log(response.data)
})

Axios is one of the most popular ways to make an API call in javascript and It is widely used in real-time applications.

Also Read : 20 Best Visual Studio Code Extensions for Web Development

4.jQuery

Jquery provides the $.ajax() method to work with an AJAX (asynchronous HTTP) request. $.ajax method can have multiple parameters, Some of them are required and others are optional. You can use it with CDN : 

<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>

API call in javascript with jquery
$(document).ready(function(){
  $.ajax({url: "URL", type:"GET",
   success: function(result){
   console.log(result);
  }});
});

Conclusion : 

These are the four ways to make an API call in Javascript. You can try all of them and decide which one you are comfortable with. However, if you’re a beginner then I would recommend you to try the fetch API first.

Photo by Markus Spiske on Unsplash

Leave a Comment