DEV Community

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

Posted on

GET, POST , PUT , DELETE in Axios

#axios #javascript #http #react

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 :

ndrohith

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';
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)