DEV Community 👩‍💻👨‍💻

Cover image for GET, POST , PUT , DELETE in Axios
Rohith ND
Rohith ND

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Using bower

bower install axios
Enter fullscreen mode Exit fullscreen mode

Using yarn

yarn add axios
Enter fullscreen mode Exit fullscreen mode

Check my earlier article on building a React app :

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

import axios from 'axios';
Enter fullscreen mode Exit fullscreen mode

The Fundamentals of Axios

GET Request

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

POST Request

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

PUT Request

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

DELETE Request

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

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Must read:

"I made 10x faster JSON.stringify() functions, even type safe"