Bdtjtk

I am trying to get the token that I stored using the ionic storage and store it in a global variable public token = ''. But every time I access it using this.token the value doesn't change.

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { Storage } from '@ionic/storage';



const TOKEN_KEY = 'access_token';



@Injectable()

export class ContactProvider {



  public url = 'myapi-link';

  public token = '';





  constructor(

    private storage: Storage,

    private http: HttpClient

  ) {



  }



  loadToken(){



    this.storage.get(TOKEN_KEY).then((token)=>{

      this.token = token;

      console.log(this.token);

    });



  }



  setHeaders(default_content_type = 'application/json'){



    let headers = new HttpHeaders();

    headers = headers.set('Content-Type', default_content_type)

    .set('Authorization', 'Bearer ' + this.token)

    return headers;



  }



  getData(type){



    this.loadToken();

    let headers = this.setHeaders();

    return this.http.get(this.url + type, {headers: headers});



  }



}

when calling the this.setHeaders(), the this.token does not change.

Like Others have pointed out, you need to understand how promises work.
Here is something how:
1: LoadToken needs to return a promise:

loadToken(){

    return this.storage.get(TOKEN_KEY);

}

Note the return key word which will return the promise returned by storage.get()

2: consume that promise and wait for it to complete before you carry on:

async getData(type){

    this.token = await this.loadToken();

    let headers = this.setHeaders();

    return this.http.get(this.url + type, {headers: headers});

}

Note the async key word in front of the getData method name which indicates you will be waiting for promises to complete within it.
then the await key word which will make sure the rest of the code after it will only execute when the promise resolves.

Since a promise can also be rejected, you need to do the following :

async getData(type){

  try {

    this.token = await this.loadToken();

    let headers = this.setHeaders();

    return this.http.get(this.url + type, {headers: headers});

  } catch (error) {

     //Handle your error here

  }

}

Call the setHeaders within the loadToken as it returns the data asynchronously,

loadToken(){

    this.storage.get(TOKEN_KEY).then((token)=>{

      this.token = token;

      console.log(this.token);

      this.headers = this.setHeaders();

    });

}