Hello,
I'm trying to fetch restaurants data in React using async and await and update my restaurants state with the returned restaurants response
In the code below (under Method 2) I created an async function and called await fetchRestaurants() which returns a response
I don't understand why within the aync function, I'm able to access the list of restaurants data. However, when I return the data, it's a promise
Can someone explain why this happens?
const fetchRestaurants = () => { ... // returns {Promise<Array<{ name: string, rating: number, location: string}>} } const [restaurants, setRestaurants] = useState([]); useEffect(() => { // Method 1 - works! const promise = fetchRestaurants(); promise .then((data) => { setRestaurants(data); }) .catch((error) => { console.error(error); }); // Method 2 - doesn't work const asyncFetchRestaurants = async () => { try { const data = await asyncFetchRestaurants(); console.log("INSIDE", data); // this prints out the list of restaurants return data; // why does this return a promise? } catch (error) { console.error(error); } }; const data = asyncFetchRestaurants(); // why is data a promise and not a list of restaurants console.log("OUTSIDE", data); // this prints out a promise! setRestaurants(data) // this doesn't work! }, []); 
Top comments (0)