Using Axios with react

What is Axios?

Axios is a promise based http client and it is lightweight.

Axios is designed to handle http requests and responses.
Axios is used more often than Javascript fetch because it has a larger set of features and it supports older browsers. We can write more readable asynchronous codes with Axios.

To install axios type

npm install axios

then import in into your code

import axios from ‘axios’;

HTTP GET Request using Axios

getProducts = async () => {
    let res = await axios.get("localhost:3000/getProducts");
    let { data } = res.data;
    this.setState({ products: data });
};

we have use async and await with axios here. axios.get will get data and then assign them to the variable.

HTTP POST Request using Axios

let product = {id : 1, name : 'Levis Trouser'  }

axios.post('localhost:3000/addProduct',product)
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

Here we have send a product object to localhost:3000/addProduct end point. here i have used promises instead of Async Await. pretty easy Right?

Http Delete with Axios

  axios.delete('localhost:3000/deleteProduct/1')
      .then(res => {
        console.log(res);
        console.log(res.data);
      })

Here we have send a HTTP Delete to product 1.

Let’s meet you in another post!!!