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 :
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
Oldest comments (0)