Making PUT & DELETE Request Using Axios In React.js
Tags: react, javascript, webdev, node
Published: 2021-08-16 22:42:02

Hi, I'm [Aya Bouchiha](developer.aya.b@gmail.com), today, we'll cover sending PUT and DELETE requests in react.js using **axios**.

- [POST & GET Request using axios in react.js](https://dev.to/ayabouchiha/making-get-and-post-request-using-axios-7g8)

## Axios

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

-   [docs](https://axios-http.com/docs/intro)
-   [github](https://github.com/axios/axios)

## Why axios instead of fetch?

I recommend reading this article by Faraz Kelhini :

-   [why axios instead of fetch](https://blog.logrocket.com/axios-or-fetch-api/)

## Axios installation

### cdn

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

Or:

```html
<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

```jsx
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

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

### Code using async and await

```jsx
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

```js
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

```jsx
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

```js
200
```

### Code using async and await

```jsx
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

```js
200
```

##  Useful Resources

-   [https://rapidapi.com/blog/api-glossary/get/](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://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://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/)
-   [https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253](https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253)

## Suggested Posts

-   [Youtube Courses, Projects To Master Javascript](https://dev.to/ayabouchiha/youtube-courses-projects-to-master-javascript-3lhc)
-   [Your Essential Guide To Map Built-in Object In Javascript](https://dev.to/ayabouchiha/the-essential-guide-to-map-built-in-object-in-javascript-17d2)
-   [All JS String Methods In One Post!](https://dev.to/ayabouchiha/all-js-string-methods-in-one-post-4h23)

To Contact Me:

-   email: developer.aya.b@gmail.com
-   telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)

Happy codding!