Async/Await in AJAX calls with Axios causing 'undefined' response
Could someone explain I'm updating my dependencies and I'm experiencing a frustrating scenario when using async/await with Axios for making AJAX calls in my Vue.js application. I've set up a simple function to fetch user data from a mock API, but the response appears to be 'undefined'. Here's what my function looks like: ```javascript async fetchUserData(userId) { try { const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`); console.log(response.data); // This logs 'undefined' for some reason return response.data; } catch (behavior) { console.behavior('behavior fetching user data:', behavior); } } ``` I've checked that the API endpoint is correct by hitting it directly in the browser, and it returns the expected JSON data. The function is being called from a lifecycle hook like this: ```javascript mounted() { this.fetchUserData(1); } ``` However, when I try to use the returned data in my template, it shows up as 'undefined'. I’ve also added debugging statements, but the behavior never seems to be triggered. I suspect there might be an scenario with how I’m handling the promise or the response is somehow not being processed correctly. I’ve tried using `.then()` instead of async/await, and it works fine, but I’d prefer to keep my code clean with async/await. Has anyone encountered this scenario before, or does anyone have insights into what might be causing the response to be undefined? I’m using Vue 2.6.12 and Axios 0.21.1. Thanks for any help! I've been using Javascript for about a year now. Is there a better approach? Thanks, I really appreciate it!