How to return an object from a successful API call inside a `try` block React?

Question

I want to return an object after a successful API call from another file.But everytime it call sucessfully,but the object that return is Undefined. Let me explain the situation clearly.

App.js

From App.js I calling Auth.session() which is will suppose to return a Session() object.

 try{
    Auth.session();  #data123


    console.log("data 123",Auth.session()); 

  }catch (e) {
    console.log(e);
  }

Auth.js

export class Auth {

  static session() {

    if(token !=null){

       return Session.getSession(); //DATA 456  
                                   //Here when return to App.js,is the outcome I want
     }


    if(refreshToken != null){
       try{

        await axiosAccessClient.post(url, body)
        .then(function (response) {

            //... do something else with the response.data

            console.log(Session.getSession());  //here have the outcome I want 
            return Session.getSession(); // **DATA 678**
                                        //but here when return to App.js,it become undefined
        }).catch(function (error) {
            throw error;
        })
      } catch (e) {
            throw e
      }

    }else{
      thorw "No session"
   }
  }
}

Here is my Session class look like

export class Session {
    constructor(access_token){
        this.token=  access_token;

    }

    static getSession(){
        return new Session(
            localStorage.getItem("access_token"),
        )
    }
}

So I which in App.js ,I can get the console.log like this :

Session{access_token: .......}  //Should return this in App.js

I can get the above result from if(token!= null) (DATA 456) part,but in the try block for the API call (DATA 678 PART) it return UNDEFINED in App.js.

So my question is ,how to return an object after successfully API call? I trying my best to address the problem,any help will be appreciated.

Btw, `Auth.session()` will never return `undefined`, it will always return a promise. Did you mean to use `await Auth.session()`? — Bergi, Dec 27 '19 at 15:39

Bergi · Accepted Answer · 2019-12-27T15:51:08.720

1

Don't use then when you want to work with async/await. Inside the if (refreshToken != null) block, you were only returning from the then callback, but never from Auth.session. Use

export class Auth {
  static async session() {
    if (token != null) {
      return Session.getSession();
    }
    if (refreshToken != null) {
      const response = await axiosAccessClient.post(url, body);
      //... do something else with the response.data
      return Session.getSession();
    } else {
      throw new Error("No session");
    }
  }
}

Btw, don't make Auth a class if static session is the only method.

edited Dec 27 '19 at 15:51

answered Dec 27 '19 at 15:36

Bergi

630,263
148
957
1,375

then how can I know the `axios api call` is success inside `if(refreshToken != null)` ?? cause it seem like dont have the point that shown is success from the answer above – ken Dec 27 '19 at 15:41
I tried your solution,in `App.js` it return a Promise instead of a `Session() ` object – ken Dec 27 '19 at 15:48
@ken you know the axios call has succeeded after the `await`. (You could keep the `try`/`catch` wrapper around it but since it only did rethrow the error and nothing else, I removed it). – Bergi Dec 27 '19 at 15:52
@ken Yes, it must return a promise, it is an async function. (I initially forgot the `async` keyword). It must do that to be able to wait for the asynchronous result of the axios api call. – Bergi Dec 27 '19 at 15:53

How to return an object from a successful API call inside a `try` block React?

1 Answers1