Why does this if never runs

Question

What I am trying to achieve is:
- first the callback runs and
- this.auth.javaAuthToken , which is a property in another file, gets initialized to the value of the token.
- after that, this function is called: return this.auth.getUserFiles();

If I do this:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
   let token = null;
    this.auth.emailListCleaningUserDetail().subscribe((res: any)=>{
    token = res.body.data.access_token;
    token = this.auth.javaAuthToken;
     return this.auth.getUserFiles();
  });

Then I get an error:

function must return a value

So I have written the code below to check if the token exists. If so, then I call the function and return.

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
   let token = null;
    this.auth.UserDetail().subscribe((res: any)=>{
    token = res.body.data.access_token;
    token = this.auth.javaAuthToken;
    console.log(token);
    console.log('inside fun');  
  });
    if(token) {
      console.log('inside if outside fun');
      this.auth.javaAuthToken = token;
      return this.auth.getUserFiles();
    }
    console.log('outside if and fun')
  }
}  

When I run the program,
- First outside if and fun is printed,
- then the token is printed, and
- then inside fun gets printed.

Answer 1

Its quite simple, when you are trying to access token (when you return your result), the result is not yet available. In async functions you either have to await the value or subscribe to the event.

If you subscribe to the event, you can only access the value inside the subscription.

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> { let token = null; this.auth.UserDetail().subscribe((res: any)=>{ token = res.body.data.access_token; token = this.auth.javaAuthToken; console.log(token); console.log('inside fun'); // This is called when you receive your result which can be later as the code below as this is async }); // token is always null because its declared as null before // when this code runs, there is no result of your Service yet if(token) { console.log('inside if outside fun'); this.auth.javaAuthToken = token; return this.auth.getUserFiles(); } console.log('this runs right after the code before but the result is not available yet') } } 

im wondering if this is async too:

this.auth.getUserFiles();

You could then do something like this

 LoadUserData = async event => { var token = null; var userfiles = null; try { var response = await this.auth.UserDetail() if (response.data != null) { token = response.data.access_token; console.log('Receiving result: '+JSON.stringify(response.data)); } } catch (error) { console.log('ERROR: '+error) } try { var responseUserFiles = await this.auth.getUserFiles(); if (responseUserFiles.data != null) { // do something with your userfiles userfiles = responseUserFiles.data; console.log('Receiving result: '+JSON.stringify(responseUserFiles.data)); } } catch (error) { console.log('ERROR: '+error) } // Here you can return what you want, userfiles or token return userfiles; } 

Answer 2

try this

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
   let token = null;
    this.auth.UserDetail().subscribe((res: any)=>{
    token = res.body.data.access_token;
    token = this.auth.javaAuthToken;
    console.log(token);
    console.log('inside fun');  

    if(token) {
      console.log('inside if outside fun');
      this.auth.javaAuthToken = token;
      return this.auth.getUserFiles();
    }

 });
    console.log('outside if and fun')
  }
}