GET, POST , PUT , DELETE in Axios

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

npm install axios

Using bower

bower install axios

Using yarn

yarn add axios

Check my earlier article on building a React app :

Build a React application using yarn package manager

Rohith ND ・ Apr 7 '22

#yarn #react

Let's add the axios package to our js code now.

import axios from 'axios';

The Fundamentals of Axios

GET Request

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

POST Request

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

PUT Request

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

DELETE Request

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

Using Axios in React Class

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