xxxxxxxxxx
Request method aliases
For convenience aliases have been provided for all supported request methods.
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
NOTE
xxxxxxxxxx
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
xxxxxxxxxx
const axios = require('axios').default;
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
xxxxxxxxxx
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);
xxxxxxxxxx
npm i axios
import axios
axios.get("https://catfact.ninja/fact").then((res) => {
console.log(res.data);
});
xxxxxxxxxx
import axios from "axios";
axios
.get('https://jsonplaceholder.typicode.com/todos')
.then((res) => {
const data = res.data.json();
})
.catch((err) => {
console.log(err);
});
xxxxxxxxxx
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
xxxxxxxxxx
const axios = require('axios');
async function makeGetRequest() {
let res = await axios.get('http://webcode.me');
let data = res.data;
console.log(data);
}
makeGetRequest();
xxxxxxxxxx
import axios from "axios";
/// POST REQUEST
addCity(data)
.then((res) => {
console.log(res);
alert("success");
});
export function addCity(data = {}) {
// console.log(data);
// {name: "mysore", population: 11111, country: "India"}
return axios.post("URL", {
name: data.name,
population: data.population,
country: data.country
});
}
xxxxxxxxxx
import axios from 'axios';
axios.get('/user_login', {
params: {
username: 'john1904',
}
})
.then(function (response) {
console.log(response);
})
xxxxxxxxxx
import React, { useEffect, useState } from 'react'
import axios from 'axios';
const Dashboard = () => {
const [api, setapi] = useState([]);
const [flag, setflag] = useState(true);
const show = async () => {
const res = await axios.get(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article`)
setapi(res.data)
console.log(api);
}
const dele = async (id) => {
await axios.delete(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article/${id}`)
setflag(!flag)
}
const additem = async()=>{
const value = prompt("Enter the new value")
const titleValue = prompt("Enter the add Title value")
const article ={"name":value,"title":titleValue}
await axios.post(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article`,article)
setflag(!flag)
}
const udate= async(id)=>{
const data = prompt("Enter the data you wanna update")
const title = prompt("Enter the title you wanna update")
await axios.put(`https://crudcrud.com/api/7cd119b8cdd546c5bcd621492ea74cae/article/${id}`,{"name":data,"title":title})
setflag(!flag)
}
useEffect(() => {
show()
}, [flag]);
useEffect(() => {
show()
// additem()
}, []);
return (
<>
<button className='btn btn-primary mr-2' onClick={additem} >Add
</button>
{/* <h1>hello</h1>
<button onClick={getdata}>click me</button> */}
<table className="table">
<thead>
<tr>
<th scope="col">User id</th>
<th scope="col">Name</th>
<th scope="col">Title</th>
</tr>
</thead>
{api.map((val) => {
return (<>
<tbody>
<tr>
<td>{val._id}</td>
<td>{val.name}</td>
<td>{val.title}</td>
<td>
<button className='btn btn-primary' onClick={()=>udate(val._id)} >edit
</button>
<button className='btn btn-danger ml-2' onClick={()=>dele(val._id)}>delete</button>
</td>
</tr>
</tbody>
</>)
})}
</table>
</>
)
}
export default Dashboard