Sending GET, POST, PUT, DELETE Requests Using Axios In React
Tags: react
Published: 2021-09-03 08:58:43

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

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

## GET request using axios

**GET**: is a request used for getting or retrieving data or information from a specified server.

### Code using then and catch

```jsx
import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
	useEffect(() => {
		const getTodo = () => {
			axios
				.get('https://jsonplaceholder.typicode.com/todos/1')
				.then((response) => {
					console.log(response.status);
					console.log(response.data);
				})
				.catch((e) => console.log('something went wrong :(', e));
		};
		getTodo();
	}, []);
	return <div>GET REQUEST</div>;
};
export default App;
```

### Console

```js
200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}
```

### Code using async and await

```jsx
import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
	useEffect(() => {
		const getTodo = async () => {
			try {
				const response = await axios.get(
					'https://jsonplaceholder.typicode.com/todos/1',
				);
				console.log(response.status);
				console.log(response.data);
			} catch (e) {
				console.log('something went wrong :( ', e);
			}
		};
		getTodo();
	}, []);
	return <div>GET REQUEST</div>;
};
export default App;
```

### Console

```js
200
{userId: 1, id: 1, title: "delectus aut autem", completed: false}
```

## POST request using axios

**POST**: is a request that is used for sending information or data to a specific server.

## axios.post(url, data, config)

### Code using then and catch

```jsx
import { useEffect } from 'react';
import axios from 'axios';
const App = () => {
	useEffect(() => {
		const postTodo = () => {
			const data = {
				title: 'drink water',
				body: 'I should drink water',
				userId: 3,
			};
			const headers = { 'header-name': 'value' };
			const config = { headers, };
			axios
				.post(
					'https://jsonplaceholder.typicode.com/posts',
					data,
					config,
				)
				.then((response) => {
					console.log(response.status);
					console.log(response.data);
				})
				.catch((e) => console.log('something went wrong :(', e));
		};
		postTodo();
	}, []);
	return <div>POST REQUEST</div>;
};
export default App;
```

### console

```js
201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}
```

### Code using async and await

```jsx
import { useEffect } from "react";
import axios from "axios";
const App = () => {
  useEffect(() => {
    const postTodo = async () => {
      const data = {
        title: "drink water",
        body: "I should drink water",
        userId: 3
      };
      const headers = { "header-name": "value" };
      const config = { headers, };
      try {
        const response = await axios.post(
          "https://jsonplaceholder.typicode.com/posts",
          data,
          config
        );
        console.log(response.status);
        console.log(response.data);
      } catch (e) {
        console.log("something went wrong!",e);
      }
    };
    postTodo();
  }, []);
  return <div>POST REQUEST</div>;
};
export default App;
```
### console

```js
201
{title: "drink water", body: "I should drink water", userId: 3, id: 101}
```


## 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 coding!