What is Axios ?

Axios is a very popular JavaScript library that allows you to make HTTP requests to a RESTful API. Axios performs the same function as the fetch API made available by various browsers. Promises are used in the background of Axios.

This blog is for beginner who is starting with axios. I've covered all the basics one need to know in order to get started with axios and have explained most widely used http method get() and post() method with proper example.

How to fetch data with axios?

In order to use axios we have to first install it.

npm install axios

Now, import axios where you want to use it.

Using Axios

I like using Axios over the fetch API mostly because it offers a very clear and accurate syntax.

Making get() request

Below is the representation of fetching data using axios.
Making get request to the endpoint of API

axios.get(url)

const fetchNews = () => {
    const EndPointUrl="https://newsapi.org/v2/everything?q=apple&from=2022-08-04&to=2022-08-04&sortBy=popularity&apiKey=5153d63033ef47c4ad86a69b1d664ab9";
    axios.get(EndPointUrl)
      .then((response) => {
        console.log(response);
      })
      .catch(error=>console.log(error));
  };

In the example above I am making a GET request to the news API to obtain a list of news.

To utilise Axios, we first call the axios function, and then we call any of the Axios library's functions that correspond to the various HTTP verbs. In the example above, we are sending a GET request using the get() method.
The way the Axios library works is that it produces an object that contains a key of data that contains the data you requested.

Making post() request

The following code, for instance, demonstrates how to perform a post request using the axios.post() method. This method accepts two parameters, the first of which is the URI of the service endpoint. Second, we're supplying an object that holds the object's properties.
Once an HTTP POST request is made, Axios returns a promise that, depending on the outcome of the backend service's answer, is either fulfilled or refused.
To handle the result, you can use the then() method.

axios.post('/login', {
  firstName: 'Sam',
  lastName: 'Wills'
})
.then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

To explore more and learn about other http methods using axios you can visit Axios.
This is my github repository link where I've used axios to fetch data of crypto coins and their information github.
Go and explore this amazing 🤩crypto web App.

If you have any query let me know in the comment section. I'll try my best to answer them.
If you find this blog helpful, please ❤️ like it.
You can follow me if you wish to learn such amazing stuffs.