Quiero usar axios usando la función de espera asíncrona.
Pero cuando uso la función de espera asíncrona, aparece un error.
useEffect(async() => { await axios .get("https://cryptic-inlet-27003.herokuapp.com/products?size=6") .then((data) => setItems(data.data)); }, []);Está usando tanto promesas como async/await al mismo tiempo, ya sea usando .then() o async/await: Aquí he mostrado cómo puede hacer esto usando promesas:
useEffect(async() => { axios.get("https://cryptic-inlet-27003.herokuapp.com/products?size=6") .then(function (response) { setItems(response.data); }) .catch(function (error) { console.log(error); })}, [])Aquí estoy usando async await:
useEffect(async() => { let response = await axios.get("https://cryptic-inlet- 27003.herokuapp.com/products?size=6") setItems(response.data); }, [])No puede usar una espera asíncrona dentro de useEffect porque esa no es una metodología de reacción, tiene que cambiar su código lógico a otro, por ejemplo, use useState varaibles y con el resultado de axios actualizará useState varaibles , algo así como que:
const [items, setItems]=useState({})//any useEffect(async() => { axios .get("https://cryptic-inlet-27003.herokuapp.com/products?size=6") .then((data) => setItems(data.data)); }, []); useEffect(()=>{ console.log(items, 'this items changed') //to do... }, [items])o
const [items, setItems]=useState({})//any async function requestAxios(){ const data=await axios.get("https://cryptic-inlet-27003.herokuapp.com/products?size=6") setItems(data.data) } useEffect(async() => { requestAxios() }, []); useEffect(()=>{ console.log(items, 'this items changed') //to do... }, [items])El problema es que está usando promesas y async/await al mismo tiempo. Async/await no es más que una capa de azúcar de promesas. Puedes leer más sobre las promesas aquí .
const fetchData = async () => { const { data } = await axios.get("https://cryptic-inlet-27003.herokuapp.com/products?size=6") // do something with data! }; useEffect(async() => { fetchData(); }, []);