Axios with async await in React
Normally, you can do an async/await axios request like so:
// 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);
}
}
In React, Promises or asnyc functions are not supported inside useEffect
, you can only return a cleanup function. There will be a related error in the Console. The recommened approach is to define your async function inside the Effect and then call it immediately
So, this:
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
instead of this:
useEffect(async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
})
In the following examples, the promise resolving happens with async/await.
GET
let getUsers = async () => {
let response = await axios.get("https://reqres.in/api/users?page=1");
let { data } = response.data;
this.setState({ users: data });
}
POST
let getUsers = async () => {
let response = await axios.post("https://reqres.in/api/users?page=1", { username: 'Aamnah'});
let { data } = response.data;
this.setState({ users: data });
}