DEV Community

Cover image for πŸš€ Mastering Axios: Simplifying HTTP Requests
Ruturaj Jadhav
Ruturaj Jadhav

Posted on

1

πŸš€ Mastering Axios: Simplifying HTTP Requests

What is Axios?

Axios is a popular JavaScript library for making HTTP requests. It provides a simple API for handling GET, POST, PUT, DELETE, and other HTTP methods with ease.

Why Use Axios?

βœ… Supports Promises & Async/Await

βœ… Automatic JSON Data Handling

βœ… Error Handling Made Easy

βœ… Works on Both Browser & Node.js

Installing Axios

npm install axios
Enter fullscreen mode Exit fullscreen mode

Or include it via CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Making Requests with Axios

1️⃣ GET Request

import axios from 'axios';

// Synchronous GET request
const getData = () => {
  axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => console.log('GET Response:', response.data))
    .catch(error => console.error('GET Error:', error));
};

getData();
Enter fullscreen mode Exit fullscreen mode

2️⃣ POST Request

const postData = () => {
  axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'Axios Guide',
      body: 'This is a simple guide to Axios.',
      userId: 1
    })
    .then(response => console.log('POST Response:', response.data))
    .catch(error => console.error('POST Error:', error));
};

postData();
Enter fullscreen mode Exit fullscreen mode

3️⃣ PUT Request

const putData = () => {
  axios.put('https://jsonplaceholder.typicode.com/posts/1', {
      title: 'Updated Axios Guide',
      body: 'This guide is now updated.',
      userId: 1
    })
    .then(response => console.log('PUT Response:', response.data))
    .catch(error => console.error('PUT Error:', error));
};

putData();
Enter fullscreen mode Exit fullscreen mode

4️⃣ DELETE Request

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

deleteData();
Enter fullscreen mode Exit fullscreen mode

Why This is Better?

βœ… Cleaner syntax compared to Fetch API

βœ… Built-in request and response interception

βœ… Supports request timeouts and cancellation

βœ… Handles all HTTP methods efficiently

Conclusion

Axios makes API requests in JavaScript simpler and more efficient. Whether you're fetching data, updating records, or deleting content, Axios is a must-have for modern web development! πŸš€

What Do You Think?

Are you using Axios in your projects? What do you want to learn next? Stay tuned for more! πŸš€

πŸ“š Official Documentation

For more details, check out the official Axios documentation: Axios Docs

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video