Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 16, 2021 10:42 pm GMT

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.

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!


Original Link: https://dev.to/ayabouchiha/making-put-delete-request-using-axios-in-react-js-j07

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To