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)