JavaScript: Function Not Returning Expected Result After Multiple Async Calls
I keep running into I'm wondering if anyone has experience with I'm working on a personal project and I've been banging my head against this for hours... I'm working with an scenario with a JavaScript function that is supposed to process data from multiple asynchronous API calls. I am using `async/await` syntax, but the results are not as expected, and I keep getting `undefined` as the output from my function. The code snippet below shows how I'm trying to implement this: ```javascript async function fetchData() { const userResponse = await fetch('https://api.example.com/user'); const userData = await userResponse.json(); const postsResponse = await fetch(`https://api.example.com/posts?userId=${userData.id}`); const postsData = await postsResponse.json(); return { userData, postsData }; } const result = fetchData(); console.log(result); // Logs: Promise {<pending>} instead of the actual data ``` I've tried adding a `console.log` right before the return statement to verify that the data is being fetched correctly, and it looks fine. When I run the function, I'm aware that it returns a promise, but I expected that with `await`, the function would resolve with the data. Instead, I'm trying to log the result directly, which seems to be the source of the confusion. How should I modify my code to get the resolved data instead of just the pending promise? Is there a best practice for handling multiple async calls in a function like this? I'm working on a service that needs to handle this. How would you solve this? My development environment is Linux. I'd really appreciate any guidance on this.