Posted on Aug 16, 2021

Making PUT & DELETE Request Using Axios In React.js

#react #javascript #webdev #node

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.

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

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

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;