Tengo una llamada a la API asíncrona que devuelve una promesa que contiene el nombre de usuario del usuario que ha iniciado sesión actualmente. Puedo extraer el nombre de usuario usando la función .then. Sin embargo, cuando trato de acceder al nombre de usuario desde fuera de la función .then, siempre aparece "indefinido".

 const getUsername = async () => { try { const res = await fetch("http://localhost:1234/username", { method: "POST", headers: { jwt_token: localStorage.token } }); const parseRes = await res.json(); return parseRes; } catch (err) { console.error(err.message); } } var username; function setUsername(uname) { username = uname; } const p = getUsername(); p.then(value => { setUsername(value.username); }); console.log(username); // returns "undefined"

He intentado hacer esto de varias maneras, como: asignar directamente a la variable de nombre de usuario, escribir una función para establecer la variable de nombre de usuario (como se muestra en este ejemplo) y poner mi función de retorno (para el componente de reacción) dentro de mi función .then , que bloquea toda la aplicación.

¿Cómo haría para recuperar el resultado de esta llamada a la API?