Making PUT & DELETE Request Using Axios In React.js

Hi, I’m Aya Bouchiha, today, we’ll cover sending PUT and DELETE requests in react.js using axios.

POST & GET Request using axios in react.js

Axios

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

do…


This content originally appeared on DEV Community and was authored by Aya Bouchiha

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>

Or:

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

npm 

npm i axios

yarn 

yarn add axios

bower 

bower install axios

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

Suggested Posts

To Contact Me:

Happy codding!


This content originally appeared on DEV Community and was authored by Aya Bouchiha


Print Share Comment Cite Upload Translate Updates
APA

Aya Bouchiha | Sciencx (2021-08-16T22:42:02+00:00) Making PUT & DELETE Request Using Axios In React.js. Retrieved from https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/

MLA
" » Making PUT & DELETE Request Using Axios In React.js." Aya Bouchiha | Sciencx - Monday August 16, 2021, https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/
HARVARD
Aya Bouchiha | Sciencx Monday August 16, 2021 » Making PUT & DELETE Request Using Axios In React.js., viewed ,<https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/>
VANCOUVER
Aya Bouchiha | Sciencx - » Making PUT & DELETE Request Using Axios In React.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/
CHICAGO
" » Making PUT & DELETE Request Using Axios In React.js." Aya Bouchiha | Sciencx - Accessed . https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/
IEEE
" » Making PUT & DELETE Request Using Axios In React.js." Aya Bouchiha | Sciencx [Online]. Available: https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/. [Accessed: ]
rf:citation
» Making PUT & DELETE Request Using Axios In React.js | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/08/16/making-put-delete-request-using-axios-in-react-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts