get value from promise inside a function - promise

Question

I want to get a value from a promise and then to return this value from the function. I'm using Axios to get the userId from the DB. I read that I should use .then but it still keeps returning a promise pending:
export async function getCurrentUserName(user){
const userName = await http.get(`${apiUrl}/users/me`,user)
.then(user =>{ return user.data.name });
return userName;
}
log:
userName Promise {pending}
_proto: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "avi"

Answer 1

The only way to get a value from a promise is with .then() or with await.
You cannot directly return the value from your function because your function returns BEFORE the asynchronous value is ready. So, your function needs to return the promise and the caller then must use .then() or await to retrieve the value from the promise.
In the code you show in your first code block, an async function ALWAYS returns a promise so you can't change that. Whatever value you return within the async function becomes the resolved value of the promise that was already returned.
To help you understand, let's review the timing of events in your function:
export async function getCurrentUserName(user){
const userName = await http.get(`${apiUrl}/users/me`,user)
.then(user =>{ return user.data.name });
return userName;
}
getCurrentUserName() gets called.
The function calls http.get()
The interpreter sees the await and suspends execution of the async function at the point and waits for the promise returned by http.get() to resolve/reject.
The function then returns an unresolved promise and execution in the code after the call to getCurrentUserName() continues. That calling code receives the unresolved promise. There is no way to return the value here because the value isn't yet known. That's why the promise is returned as it's a placeholder for the future value.
Sometime later, the http.get() resolves its promise and the execution of your function continues. It executes the .then() handler to get user.data.name.
The interpreter gets to the line return userName;. Since this is an async function that has already actually returned a promise, this return statement triggers that previously resolved promise to now get resolved with the resolved value set to userName.
A caller that was using await or .then() on the previously returned promise will get notified that the promise has now resolved and they will receive the userName resolved value.

Answer 2

This will solve your problem.
export async function getCurrentUserName(user) {
let userName = await http.get(`${apiUrl}/users/me`,user)
.then(user => {
if (user) {
username = user.data.name
} else {
alert('Failed to data')
}
return userName;
}
Or you can use a try and catch block.
async getCurrentUserName(user) {
try {
let response = await http.get(`${apiUrl}/users/me`,user);
let user = await response.json();
} catch(err) {
// catches errors both in fetch and response.json
alert(err);
}
}
Or So whenever you send data always use post rather than get
async getCurrentUserName(user) => {
await http.post(`${apiUrl}/users/me`,user)
.then(user =>{ return user.data.name })
.catch(function (error) {
return error;
})()
}