I'm trying to fetch from the PokemonAPI but when I console.log my response, it logs twice, and I don't know if that's a problem or not. I'm doing it with Reactjs. My code:
const fetchPokemon = async () => {
try {
const res = await fetch('https://pokeapi.co/api/v2/pokemon/1')
const pokemon = await res.json()
console.log(pokemon)
} catch (err) {
console.log(err)
}
}
fetchPokemon()
In React functional components API call should be placed inside useEffect() function, this will resolve your issue.
useEffect(() => {
async function apiCall() {
const res = await fetch('https://pokeapi.co/api/v2/pokemon/1')
const pokemon = await res.json()
console.log(pokemon)
}
apiCall();
}, []);
Related
I'm having some troubles about react, fetch and async/await.
I have this code as a fetch wrapper:
export const fetcher = (url, options = null) => {
const handle401Response = error => {
throw error;
}
const isResponseValid = response => {
if (!response.ok)
throw response;
else
return response.json();
}
return fetch(url, { ...options, credentials: 'include' })
.then(isResponseValid)
.catch(handle401Response);
}
Then I define some API calls functions like:
export const getGroups = (id = null) => {
return fetcher(`${API_GROUP_URL}${id !== null ? `?id=${id}` : ''}`);
}
And then I try to use it like:
export function SomeComponent(props) {
const groups = async () => {
try {
const ret = await getGroups();
return ret;
} catch (err) {
console.log(err);
}
};
console.log(groups());
return <h1>Component</h1>
}
The result in console is: Promise{}.
I have read docs about async/await but can't understand why await is not waiting for promise to end.
Thanks in advance!
export function SomeComponent(props) {
const [data, setData] = useState()
const groups = async () => {
};
useEffect(() => {
const fetchData = async () => {
try {
const ret = await getGroups();
// process and set data accordingly
setData(ret)
} catch (err) {
console.log(err);
}
}
// fetch data inside useEffect
fetchData()
}, [])
// console.log(groups());
return <h1>Component {data?.prop}</h1>
}
Hope this gives you an idea on how to fetch in a functional component
Async functions always return a promise. The time when you call that function it will give you back a promise instantly. You have used await inside the function and it is waiting for getGroup promise.
In normal javascript function console.log(await) this will fix the issue but in react you have to do it inside a another function because you cant make react components async (at least not in React 17 and below)
I have a problem with async request return. It returns me back a Promise instead of data!!
So i tried to process data variable a second time but it did not work. I exported it as it needs, created initial state for repo=[], passed in to the reducer...
gitContext.jsx
const getRepos = async (login) => {
setLoading();
const params = new URLSearchParams({
sort:'created',
per_page:10
})
const response = await fetch(`http://api.github.com/users/${login}/repos?${params}`)
if (response.status === 404) {
window.location = './notfound'
} else {
const data = await response.json();
console.log(data);
dispatch({
type: 'GET_REPOS',
payload: data
})
}
}
Here is the function call from User.jsx
const { getUser, user, isLoading, repos, getRepos } = useContext(GitContext);
const params = useParams()
useEffect(() => {
getUser(params.login);
// console.log(getRepos(params.login?.repos))
getRepos(login?.repos);
}, [])
Data is coming but not displaying
[
Following is my useFetch code I just want to display the todo details
import { useEffect, useState } from "react";
const useFetch = url => {
const [data, setData] = useState([]);
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const response = await fetch(url)
const data = await response.json();
setData(data)
} catch (error) {
console.error("Error from Fetch:", error);
}
}
return data;
}
export default useFetch;
Since you are returning the todo as an object itself, you cannot extract it but use it as it is:
const todo = useFetch('http://localhost/todos/todosapi/todos/' + id);
Now you can access the properties.
If you want to destructe the return, you have to wrap the response once more:
const getData = async () => {
try {
const response = await fetch(url)
const data = await response.json();
setData(data)
} catch (error) {
console.error("Error from Fetch:", error);
}
}
return {todo: data};
}
To reduce the amount of calls you have to make and to cache data, check out react-query.
At:
const { todo } = useFetch('http://localhost/todos/todosapi/todos/' + id);
You're trying to access property todo of the fetch response.
Based on the JSON response in the inspector network tab, it looks like there's no todo property. That might be why it is undefined.
im trying to make a request to google api but returns me network error. If i put the url in the browser, brings me the information correctly.I tryed to formate the request without success. The google places search works correctly too.
export const fetch_information = (skip, limit, filter) => async (dispatch) => {
try {
var url = `https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJk0aJYPbk3JQRLpKN20Jecko&fields=name,rating,formatted_phone_number&key=MyKey`;
const {data} = await axios.get(url)
console.log(data)
} catch (error) {
console.log(error.message)
}
}
and
export const fetch_information = (skip, limit, filter) => async (dispatch) => {
try {
var url = `https://maps.googleapis.com/maps/api/place/details/json?`;
let config = {
params: {
place_id: 'ChIJk0aJYPbk3JQRLpKN20Jecko',
key: 'myKey',
},
}
const {data} = await axios.get(url, config)
console.log(data)
} catch (error) {
console.log(error.message)
}
}
I think that the request looks a bit messy. I'm under the impression that you are trying to pass results to a redux store. Let's see if we can clean this up a bit.
export const fetch_information = async () => dispatch => {
const req = await axios.get("https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJk0aJYPbk3JQRLpKN20Jecko&fields=name,rating,formatted_phone_number&key=MyKey");
const data = await req.json();
return data;
//or, for your purpose...
console.log(data);
//can also dispatch for store
}
I didn't see anything you were passing as necessary for this.
I'm trying to get the data of "body" outside of the fetchUserData() function.
I just want to store it in an variable for later use.
Also tried modifying state, but didn't work either.
Thanks for your help :)
const [userData, setUserData] = useState();
async function fetchUserData () {
try {
const result = await fetch(`/usermanagement/getdocent`, {
method: "GET"
});
const body = await result.json();
//setUserData(body);
return(
body
)
} catch (err) {
console.log(err);
}
}
let userTestData
fetchUserData().then(data => {userTestData = data});
console.log(userTestData);
//console.log(userData);
Use useEffect
async function fetchUserData () {
try {
const result = await fetch(`/usermanagement/getdocent`, {
method: "GET"
})
return await result.json()
} catch (err) {
console.log(err)
return null
}
}
const FunctionalComponent = () => {
const [userData, setUserData] = useState()
useEffect(() => {
fetchUserData().then(data => {
data && setUserData(data)
})
}, []) // componentDidMount
return <div />
}
Ben Awad's awesome tutorial
Example:
it seems that you are making it more complicated than it should be. When you get the response i.e the resolved promise with the data inside the async function, just set the state and in the next render you should get the updated data.
Example:
const [userData, setUserData] = useState();
useEffect(() => {
const getResponse = async () => {
try {
const result = await fetch(`/usermanagement/getdocent`, {
method: "GET"
});
const body = await result.json();
setUserData(body);
} catch (err) {
console.log(err)
}
}
getResponse();
}, [])
console.log(userData);
return <div></div>
Assuming the you need to call the function only once define and call it inside a useEffect or 'componentDidMount'. For using async function inside useEffect we need to define another function and then call it.
When you do
let userTestData
// This line does not wait and next line is executed immediately before userTestData is set
fetchUserData().then(data => {userTestData = data});
console.log(userTestData);
// Try changing to
async someAsyncScope() {
const userTestData = await fetchUserData();
console.log(userTestData)
}
Example:
state = {
someKey: 'someInitialValue'
};
async myAsyncMethod() {
const myAsyncValue = await anotherAsyncMethod();
this.setState({ someKey: myAsyncValue });
}
/*
* Then in the template or where ever, use a state variable which you update when
* the promise resolves. When a state value is used, once the state is updated,
* it triggers as a re-render
*/
render() {
return <div>{this.state.someKey}</div>;
}
In your example you'd use setUserData instead of this.setState and userData instead of {this.state.someKey}