Sending GET, POST, PUT, DELETE Requests Using Axios In 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.

• docs
• github

Why axios instead of fetch?

I recommend reading this article by Faraz Kelhini :

• why axios instead of fetch

Axios installation

cdn

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

Or:

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

npm

npm i axios

yarn

yarn add axios

bower

bower install axios

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;

Console

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}

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;

Console

200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}

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;

console

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

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;

console

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

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;

Console

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

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;

Console

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

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;

console

200

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;

console

200

Useful Resources

• https://rapidapi.com/blog/api-glossary/get/
• https://assertible.com/blog/7-http-methods-every-web-developer-should-know-and-how-to-test-them
• https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/
• https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253

Suggested Posts

• Youtube Courses, Projects To Master Javascript
• Your Essential Guide To Map Built-in Object In Javascript
• All JS String Methods In One Post!

To Contact Me:

• email: [e-mail]
• telegram: Aya Bouchiha

Happy coding!

Comments

[Aya Bouchiha]

Thank you !