Learn the basics of Axios in just 4 simple methods

Axios is a popular JavaScript library that provides a simple way to send HTTP requests and handle responses. In this blog post, we'll cover everything you need to know about using Axios, from the basics to more advanced features.

Getting Started with Axios To use Axios in your project, you first need to install it using npm or yarn:

npm install axios

Once you've installed Axios, you can import it into your project and start using it to send HTTP requests.

import axios from 'axios';

So now we know how we can add Axios to our project now let's start with the basics of Axios:

Sending GET Requests:

To send a GET request with Axios, you simply call the axios.get() method and pass in the URL you want to retrieve data from. Here's an example:

axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're using the axios.get() method to retrieve a list of posts from the JSONPlaceholder API. We then log the response data to the console using the console.log() method.

Sending POST Requests:

To send a POST request with Axios, you use the axios.post() method and pass in the URL you want to send data to, along with the data you want to send. Here's an example:

axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'New Post',
body: 'This is a new post.'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're using the axios.post() method to send a new post to the JSONPlaceholder API. We pass in an object with a title and body property to send along with the request.

Sending PUT Requests:

To send a PUT request with Axios, you use the axios.put() method and pass in the URL you want to update data on, along with the updated data you want to send. Here's an example:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
title: 'Updated Post',
body: 'This is an updated post.'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're using the axios.put() method to update an existing post on the JSONPlaceholder API. We pass in an object with a title and body property to send along with the request, as well as the ID of the post we want to update.

Sending DELETE Requests:

To send a DELETE request with Axios, you use the axios.delete() method and pass in the URL you want to delete data from. Here's an example:

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're using the axios.delete() method to delete an existing post on the JSONPlaceholder API. We pass in the ID of the post we want to delete.

Handling Errors Axios makes handling errors that may occur when sending HTTP requests easy. You can use the catch() method to handle any errors that occur during the request. Here's an example:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're using the catch() method to log any errors that occur when trying to retrieve data from an invalid URL.

Configuring Axios

Axios also provides a way to configure default settings that apply to all requests made with Axios. This can be useful if you want to set a default timeout or set default headers that should be sent with every request. Here's an example:

axios.defaults.timeout = 5000;

axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

In this example, we're setting a default timeout of 5000 milliseconds for all requests made with Axios. If a request takes longer than 5 seconds to complete, Axios will automatically cancel the request.

You can also set default headers using the axios.defaults.headers object. For example, if you wanted to send a Authorization header with every request, you could do something like this:

axios.defaults.headers.common['Authorization'] = 'Bearer my-auth-token';

This will set the Authorization header to Bearer my-auth-token for all requests made with Axios.

Conclusion

Axios is a powerful and easy-to-use library for making HTTP requests in JavaScript applications. Whether you're a beginner or an experienced developer, Axios provides a simple and intuitive API that makes it easy to send GET, POST, PUT, and DELETE requests, handle errors, and configure default settings. With its extensive feature set and flexibility, Axios is a great choice for any project that requires HTTP communication with a server.