Axios is a popular JavaScript library that is used to make HTTP requests from browser to server. In this tutorial, we will learn how to use Axios API in JavaScript for beginners in Hindi.
Step 1: Install Axios
First, we need to install Axios in our project. We can do this by including the Axios library in our HTML file or by using a package manager like npm or yarn.
To install Axios using npm, run the following command in your terminal:
npm install axios
Step 2: Import Axios
Next, we need to import Axios in our JavaScript file. We can do this by adding the following code at the top of our file:
import axios from 'axios';
Step 3: Making a GET Request
Now that we have imported Axios, we can start making HTTP requests. Let’s start by making a GET request to a sample API. Below is an example of how to make a GET request using Axios:
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
In this code, we are making a GET request to the JSONPlaceholder API to fetch a list of posts. The axios.get
method takes a URL as an argument and returns a Promise. We then use the then
method to handle the successful response and the catch
method to handle any errors.
Step 4: Making a POST Request
We can also make a POST request using Axios to send data to the server. Here is an example of how to make a POST request using Axios:
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
In this code, we are making a POST request to the JSONPlaceholder API to create a new post. We pass an object containing the data we want to send to the server as the second argument to the axios.post
method.
Step 5: Handling Response Data
Once we have made a request using Axios, we can access the response data by using the response.data
property. This property will contain the data returned by the server in the form of an object.
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
Step 6: Error Handling
In case there is an error in the HTTP request, we can catch the error using the catch
method. We can then log the error to the console or perform any other necessary actions.
axios.get('https://jsonplaceholder.typicode.com/posts/1000')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
In this code, we are making a request to a non-existent endpoint to simulate an error. We catch the error using the catch
method and log it to the console.
Step 7: Conclusion
In this tutorial, we learned how to use Axios API in JavaScript for making HTTP requests. We learned how to install Axios, import it in our JavaScript file, make GET and POST requests, handle response data, and catch errors.
Axios is a powerful and easy-to-use library for making HTTP requests in JavaScript. It simplifies the process of making API calls and handling responses. I hope this tutorial was helpful for beginners in learning how to use Axios in JavaScript. Happy coding!
SIR YOU ARE GREAT❤