DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on • Edited on

Sending GET, POST, PUT, DELETE Requests Using Axios In React

#react

Hi, I'm Aya Bouchiha, today, we'll cover sending POST and GET requests in react.js using axios.

Axios

axios: is a popular Javascript library used for making HTTP requests to an API.

Why axios instead of fetch?

I recommend reading this article by Faraz Kelhini :

Axios installation

cdn 

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

Or:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm 

npm i axios
Enter fullscreen mode Exit fullscreen mode

yarn 

yarn add axios
Enter fullscreen mode Exit fullscreen mode

bower 

bower install axios
Enter fullscreen mode Exit fullscreen mode

GET request using axios

GET: is a request used for getting or retrieving data or information from a specified server.

Code using then and catch 

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const getTodo = () => {
            axios
                .get('https://jsonplaceholder.typicode.com/todos/1')
                .then((response) => {
                    console.log(response.status);
                    console.log(response.data);
                })
                .catch((e) => console.log('something went wrong :(', e));
        };
        getTodo();
    }, []);
    return <div>GET REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

Console 

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}
Enter fullscreen mode Exit fullscreen mode

Code using async and await 

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const getTodo = async () => {
            try {
                const response = await axios.get(
                    'https://jsonplaceholder.typicode.com/todos/1',
                );
                console.log(response.status);
                console.log(response.data);
            } catch (e) {
                console.log('something went wrong :( ', e);
            }
        };
        getTodo();
    }, []);
    return <div>GET REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

Console 

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}
Enter fullscreen mode Exit fullscreen mode

POST request using axios

POST: is a request that is used for sending information or data to a specific server.

axios.post(url, data, config)

Code using then and catch 

import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
    useEffect(() => {
        const postTodo = () => {
            const data = {
                title: 'drink water',
                body: 'I should drink water',
                userId: 3,
            };
            const headers = { 'header-name': 'value' };
            const config = { headers, };
            axios
                .post(
                    'https://jsonplaceholder.typicode.com/posts',
                    data,
                    config,
                )
                .then((response) => {
                    console.log(response.status);
                    console.log(response.data);
                })
                .catch((e) => console.log('something went wrong :(', e));
        };
        postTodo();
    }, []);
    return <div>POST REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

console 

201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}
Enter fullscreen mode Exit fullscreen mode

Code using async and await 

import { useEffect } from "react";
import axios from "axios";
const App = () => {
  useEffect(() => {
    const postTodo = async () => {
      const data = {
        title: "drink water",
        body: "I should drink water",
        userId: 3
      };
      const headers = { "header-name": "value" };
      const config = { headers, };
      try {
        const response = await axios.post(
          "https://jsonplaceholder.typicode.com/posts",
          data,
          config
        );
        console.log(response.status);
        console.log(response.data);
      } catch (e) {
        console.log("something went wrong!",e);
      }
    };
    postTodo();
  }, []);
  return <div>POST REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

console 

201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}
Enter fullscreen mode Exit fullscreen mode

PUT request using axios

PUT: is a request used for creating or updating a resource in a specific server.

Code using then and catch 

import { useEffect } from 'react';
import axios from 'axios';

const todo = {
    id: 10,
    title: 'go to gym',
    body: 'practicing sport is very important',
    userId: 2,
};

const App = () => {
    useEffect(() => {
        axios
            .put('https://jsonplaceholder.typicode.com/posts/10', todo)
            .then((response) => {
                console.log(response.status);
                console.log(response.data);
            })
            .catch((e) => console.log('something went wrong :(', e));
    }, []);
    return <div>PUT REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

Console 

200
{id: 10, title: "go to gym", body: "practicing sport is very important", userId: 2}
Enter fullscreen mode Exit fullscreen mode

Code using async and await 

import { useEffect } from 'react';
import axios from 'axios';

const todo = {
    id: 10,
    title: 'go to gym',
    body: 'practicing sport is very important',
    userId: 2,
};

const App = () => {
    useEffect(() => {
        const putTodo = async () => {
            try {
                const response = await axios.put(
                    'https://jsonplaceholder.typicode.com/posts/10',
                    todo,
                );
                console.log(response.status);
                console.log(response.data);
            } catch (e) {
                console.log('something went wrong :(', e);
            }
        };
        putTodo();
    }, []);
    return <div>PUT REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

Console 

200
{id: 10, title: "go to gym", body: "practicing sport is very important", userId: 2}
Enter fullscreen mode Exit fullscreen mode

DELETE request using axios

DELETE: is a request used to delete a specific resource in a server.

Code using then and catch 

import { useEffect } from 'react';
import axios from 'axios';

const App = () => {
    useEffect(() => {
        axios
            .delete('https://jsonplaceholder.typicode.com/posts/10')
            .then((response) => {
                console.log(response.status);
            })
            .catch((e) => console.log('something went wrong!', e));
    }, []);
    return <div>DELETE REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

console 

200
Enter fullscreen mode Exit fullscreen mode

Code using async and await 

import { useEffect } from 'react';
import axios from 'axios';

const App = () => {
    useEffect(() => {
        const deleteTodo = async () => {
            try {
                const response = await axios.delete(
                    'https://jsonplaceholder.typicode.com/posts/10',
                );
                console.log(response.status);
            } catch (e) {
                console.log('something went wrong!', e);
            }
        };
        deleteTodo();
    }, []);
    return <div>DELETE REQUEST</div>;
};
export default App;
Enter fullscreen mode Exit fullscreen mode

console 

200
Enter fullscreen mode Exit fullscreen mode

Useful Resources

Suggested Posts

To Contact Me:

Happy coding!

Top comments (1)

Collapse
 
ayabouchiha profile image
Aya Bouchiha •

Thank you !

Read next

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -

bookercodes profile image

Learn useActionState quickly with an example (Next.js 15)

Alex Booker -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

prajesh_kun profile image

Questions Asked in React.js Interview.

Prajesh Gawhale -