Using Axios Api in Javascript.

Making API calls is essential to most applications and while doing this we use an HTTP client usually available as an external library.

We can make API calls with Axios from JavaScript applications irrespective of whether the JavaScript is running on the Front-end or the Back-end.

In this article, we’ll understand how to get started with Axios, from installation to making basic GET and POST requests and handling errors, using async/await syntax.

What is Axios

Axios is a popular Javascript library used for making HTTP requests from a web browser or Node.js.

Setting Up Axios

To start using Axios, you will need to install it in your project. you can do this using either NPM or CDN. Here’s an example of how to install Axios using NPM:

npm install axios

Once you’ve installed Axios, you can include it in your HTML or Javascript code. Here’s an example of how to include Axios in your code:

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

// OR if you're using a module bundler
import axios from 'axios';

Basic GET Request

Let’s make a simple GET request to retrieve data from an API using async/await syntax.

Let's see an example of how to make a GET request with Axios using async/await:

const fetchDatas = async() => {
  try{
      const response = await axios.get('https://yourapi.com/data');
      console.log(response.data);
  }catch(error){
    console.error(`An error occured: ${error}`);
  }
}

fetchDatas();

we're using the async/await keywords to create an asynchronous function and wait for the resolved response from our API before logging the data.

The response have a property called data which is an array of resource returned from our Api.

Now, let's make a simple POST request to send data to an API endpoint. Here is an example of how to make a POST request with Axios using async/await:

const postData = async() => {
  try{
      const response = await axios.post('https://yourapi.com/data', {
        title: 'Axios Api',
        author: 'John Doe'
      });
      console.log(response.data);
    }catch(error){
      console.error(`An error occured: ${error}`);
    }
  }
postData();

The data we’re sending is an object with two properties: title and author.

Handling Errors

Sometimes HTTP requests can fail, for various reasons such as network errors or server-side errors.

It's important to handle these errors gracefully in your code. Axios provides several options for handling errors and exceptions.

Here’s an example of how to handle a 404 error using async/await :

const handleFetchError = async() => {
  try{
      const response = await axios.get('https://yourapi.com/data');
      console.log(response.data);
    }catch(error){
      if(error.response.status === 404){
          console.error('Data not found');
      }
      console.error(`An error occured: ${error}`);
    }
  }
handleFetchError();

In the example above, we’re using the if statement to check if the HTTP response status is 404, which indicates that the requested data was not found.

if the status is 404, we’re logging a custom error message to the console. if the status is anything else, we're logging the original error message to the console.

Conclusion

whether you need to make a simple GET request or a complex POST request. Axios provides an intuitive and flexible API that you can use with async/await syntax to create robust and reliable applications.

I hope you enjoyed this article and learned something new. If you have any queries let me know in the comment box or you can connect with me on Twitter.