Using Axios In React JS....

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.

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

npm i axios

For YARN User->

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..