How to Make GET call to an API using Axios in JavaScript?

Last Updated : 17 Jun, 2024

Axios is a promise-based HTTP client designed for Node.js and browsers. With Axios, we can easily send asynchronous HTTP requests to REST APIs and perform create, read, update and delete operations. It is an open-source collaboration project hosted on GitHub. It can be imported in plain JavaScript or with any library accordingly. There are two methods to use the AXIOS which are as follows:

Table of Content

Using Axios in Html head

The following script-src will include axios.js in the head section of your HTML code

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

When we send a request to the API using Axios, it returns a response. The response object consists of:

data: the data returned from the server.
status: the HTTP code returned from the server.
statusText: the HTTP status returned by the server.
headers: headers obtained from the server.
config: the original request configuration.
request: the request object.

For the purpose of demonstration, we will be hosting an API on the localhost:

http://127.0.0.1:5000

Include axios.js and the corresponding JS file in the HTML file. In the JS file, write the following code which makes a GET request using Axios to the API. A GET request to the API requires the path to the API method.
Example: To demonstrate making a GET request using Axios to the API in JavaScript.

JavaScript

function makeGetRequest(path) {     axios.get(path).then(         (response) => {             var result = response.data;             console.log(result);         },         (error) => {             console.log(error);         }     ); } makeGetRequest('http://127.0.0.1:5000/test');

Output: It will call the API with a GET request. The response will be obtained on the console window.

Using npm install

Axios is a popular JavaScript library used for making HTTP requests in both Node.js and browser environments. It simplifies the process of sending asynchronous HTTP requests to REST APIs, allowing developers to perform various operations like fetching data, sending data, updating data, and deleting data

Step-by-step Explanation:

Step 1. Install Axios

First, install Axios in your project using npm (Node Package Manager). Open your terminal or command prompt and run the following command:

   npm install axios

Step 2. Import Axios

In your JavaScript file where you want to make API calls, import Axios using either `require` or `import` syntax, depending on your project setup.

Using CommonJS (Node.js):

   const axios = require('axios');

Using ES6 Modules:

   import axios from 'axios';

Step 3. Make a GET Request

To make a GET request to an API endpoint using Axios, you need to specify the URL of the endpoint you want to fetch data from. Use the `axios.get()` method and pass the URL as an argument.

Syntax:

   axios.get(url[, config]) 
      .then(response => {
           // Handle successful response
           console.log(response.data); // Access response data
       })
       .catch(error => {
           // Handle error 
          console.error(error);
       });

Example: To demonstrate making the get call to an API using Axios in JavaScript.

JavaScript

const axios = require('axios'); axios.get('https://api.example.com/data')     .then(response => {         console.log(response.data);          // Display fetched data     })     .catch(error => {         console.error('Error fetching data:', error);     });

Output: The output will include the data that is fetched after hitting the end point of the API.

How To Use JavaScript Fetch API To Get Data?

chitrankmishra

Improve

Article Tags :