Making PUT & DELETE Request Using Axios In React.js

Posted on

Hi, I’m Aya Bouchiha, today, we’ll cover sending PUT and DELETE 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



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 codding!

Leave a Reply

Your email address will not be published.