Using Axios In React JS....
Tags: react, axios, database
Published: 2023-04-19 05:19:19

Hi Friends.. Let me help you to understand and use axios in react js application. So I am writing this post by considering that you guys know about react js(If don't please gather some knowledge regarding [react js](https://react.dev/).


## **What Is Axios?**

Axios is a popular JavaScript library used for making HTTP request from a web browser or Node.Js.

- Whether you're building a web app or a server-side application, Axios makes is easy to work with **APIs** and other **HTTP services**.

- In this post, We will show you how to get get started with Axios, from installing to making basic **GET** and **POST** requests and also how to handle error by using async/await syntax.



## **Setting Up Axios**
To start using Axios you'll need to install it in your project. You can do this using NPM or YARN.

[_For NPM User->_](https://www.npmjs.com/package/axios)

```
npm i axios
```
[_For YARN User->_](https://yarnpkg.com/package/axios)

```
yarn add axios
```

After Installing axios you need to use/ Import it your project.

```
import axios from 'axios';
```
---

## **Basic GET Request**
To make a simple **GET** request to fetch data

```
// using promise

axios.get('URL')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
```
OR

```
// using async and await

async function getUser() {
  try {
    const response = await axios.get('URL');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

```

---

## **Basic POST Request**
When we need to send some data to server we use POST request.
To make a simple **POST** request to fetch data
In post request usually user send data to server and we call it as request body and server gives response.

```
// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
axios.post(MY_URL,JSON.stringify(data ))
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
```
OR

```
// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
async function getUser() {
 try {
  const response = await axios.post(MY_URL,JSON.stringify(data ));
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

```
---

## **Basic PUT Request**
The PUT method is most often used to update an existing resource. If you want to update a specific resource (which comes with a specific URI), you can call the PUT method to that resource URI with the request body containing the complete new version of the resource you are trying to update.

```
// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
axios.put(MY_URL,JSON.stringify(data ))
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
```
OR

```
// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
async function editUser() {
  try {
   const response = await axios.put(MY_URL,JSON.stringify(data ));
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

```
---
## **Basic Delete Request**
The DELETE method is used to delete a resource specified by its URI.

```
// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
axios.delete(MY_URL)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
```
OR

```
// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
async function deleteUser() {
  try {
    const response = await axios.put(MY_URL);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

```


This document only cover basic use case.. As Axios is a very powerful tool that we can use it in advance case also..