GET, POST , PUT , DELETE in Axios
Tags: axios, javascript, http, react
Published: 2022-04-09 15:31:57

Axios is a promise-based HTTP Client for node.js and the browser. It has an isomorphic shape ( it can run in the browser and nodejs with the same codebase). It uses the native node.js http module on the server, and XMLHttpRequests on the client (browser).

## Installation 

Using npm
```js
npm install axios
``` 
Using bower 

```jsx
bower install axios
``` 
Using yarn

```js
yarn add axios
``` 

Check my earlier article on building a React app : 

{% embed https://dev.to/ndrohith/build-a-react-application-using-yarn-package-manager-423e %}

Let's add the axios package to our js code now.
```jsx
import axios from 'axios';
```

## The Fundamentals of Axios

### GET Request

```jsx
axios.get('url')
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error)=> {
    // handle error
    console.log(error);
  })
``` 

### POST Request

```js
axios.post('url', {
id : 1,
name : 'rohith'
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error)=> {
    // handle error
    console.log(error);
  })
```

### PUT Request

```js
axios.put('url', {
id : 1,
name : 'ndrohith'
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error)=> {
    // handle error
    console.log(error);
  })
```

### DELETE Request

```js
axios.delete('url', {
id : 1,
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error)=> {
    // handle error
    console.log(error);
  })
```

## Using Axios in React Class

```jsx 
import axios from "axios";
class AxiosRequests extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    try {
      await axios({
        url: url,
        method: "GET",
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  }

  postData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "rohith",
    };
    try {
      await axios({
        url: url,
        method: "POST",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  putData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "ndrohith",
    };
    try {
      await axios({
        url: url,
        method: "PUT",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  deleteData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
    };
    try {
      await axios({
        url: url,
        method: "DELETE",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  render() {
    return <></>;
  }
}

export default AxiosRequests;
``` 

**NOTE**:  async/await is a feature of ECMAScript 2017 that is not supported by Internet Explorer and previous browsers, therefore use with caution.

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