Why does my function not waiting for the API response?

Question

I have a class that is using an API, I have all my request inside this class.

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 },
        });
    }

}

And I use it inside a Vue Component

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);
       }    
    }

When I call the function isInstanceWorking() the first time (event click on a button), it gives me an empty object and when I press a second time on the button, it gives me an instance. I think it's because the first time, my API didn't receive the response and when I call it a second time, my API receive it (it didn't wait for the response).

So after some researches, I find that it might be because of not using things like await, async, or then. But I tried to use them but it didn't work for me.

So my question is, how can I say to my function to wait a response and then do something ? What I am doing wrong ?

In the future I wanna add others requests to my API like this.games = this.API.games (return the games for the current instance) etc..

Wang Liang · Accepted Answer · 2021-08-25 19:48:29Z

1

createInstance(token) {
    this._instance = axios.create({
           baseURL: "thisisanexample.com",
           timeout: 1000,
           headers: { Authorization: "Bearer " + token },
        })
}

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) => {
                  return this.API.createInstance(r.data.token);
             })
             .then(()=>{
                  //call isInstanceWorking
                  return this.API.getGames()
             })
             .then(r=>{
                  console.log(r);// games data
             })
       }

       isInstanceWorking(){
          console.log(this.API.instance);
       }    
    }

edited Aug 25, 2021 at 19:48

answered Aug 25, 2021 at 19:06

Wang Liang

4,4527 gold badges26 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JohnW2Smith Over a year ago

I tried the first solution and I still have the problem. Is it because I call this.API.createInstance(r.data.token) inside the login.then()... ?

JohnW2Smith Over a year ago

Ok it worked for the instance, but now that my instance is initialized I tried something like this getGames(){ this.instance.get("api.com/games").then((r) => { this._games = r })} but it didn't work, where should I call getGames()? (it's in my API class)

JohnW2Smith Over a year ago

Sorry for taking your time. But r is undefined in my case. When I'm calling this.API.games right after the console.log(r) I have an empty object too

Wang Liang Over a year ago

with getGames(){ return this.instance.get("api.com/games"), my code will be working

JohnW2Smith Over a year ago

Yes exactly ! I was going to write that a return is missing inside getGames(), but now it's working. Thank you very much! I understand now, I didn't know I could use multiple then.

secure12 · Accepted Answer · 2021-08-25 19:25:24Z

1

Try logging the instance in the same .then chain in login.

login() {
    this.API.login("username", "password").then((r) => {
        this.API.createInstance(r.data.token).then(() => {
            console.log(this.API.instance);
        )};
    });
}

answered Aug 25, 2021 at 19:25

secure12

1732 silver badges7 bronze badges

Collectives™ on Stack Overflow

Why does my function not waiting for the API response?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related