Tengo una clase que usa una API, tengo todas mis solicitudes dentro de esta clase.

 export default class API { constructor() { this._instance = {}; } get instance() { return this._instance; } set instance(newInstance) { this._instance = newInstance; } login(username, password) { return axios.post("thisisanexample.com/login", { username: username, password: password, }); } createInstance(token) { this._instance = axios.create({ baseURL: "thisisanexample.com", timeout: 1000, headers: { Authorization: "Bearer " + token }, }); } }

Y lo uso dentro de un componente Vue

 import Api from "../api.js" export default{ name : "login", data : () => ({ API : { instance: null, }, }), mounted() { this.API = new Api(); } methods : { login(){ this.API.login("username", "password").then((r) => { this.API.createInstance(r.data.token); }); } isInstanceWorking(){ console.log(this.API.instance); } }

Cuando llamo a la función isInstanceWorking() la primera vez (evento, haga clic en un botón), me da un objeto vacío y cuando presiono el botón por segunda vez, me da una instancia. Creo que es porque la primera vez, mi API no recibió la respuesta y cuando la llamé por segunda vez, mi API la recibió (no esperó la respuesta).

Entonces, después de algunas investigaciones, descubrí que podría deberse a que no usé cosas como await, async o then. Pero traté de usarlos pero no funcionó para mí.

Entonces mi pregunta es, ¿cómo puedo decirle a mi función que espere una respuesta y luego haga algo? Que estoy haciendo mal ?

En el futuro, quiero agregar otras solicitudes a mi API como this.games = this.API.games (devolver los juegos para la instancia actual), etc.