异步执行函数 angular

Question

I have a problem with my service, I need to call the function to getToken () asynchronously so that it initializes the token and token_type variables, these are necessary to be able to make all the requests to the API

this is my service

  async ngOnInit(){
    await this.getToken();

  }
  token: string;
  tokenType: string;
  getQuery(query: string): Observable<any> {
    const url = `https://api.spotify.com/v1/${ query }`;
    let bearer = this.tokenType+' '+this.token;
    let headers = new HttpHeaders();
    headers = headers.set('Authorization', bearer);
    console.log(headers);
    return this._http.get(url, { headers });
  }  
  getNewReleases() : Observable<any>{  
    return this.getQuery('browse/new-releases?limit=20')
              .pipe( map( data => data['albums'].items ));   
  }
 
 async getToken(): Promise<any>{
    const clientSecret  = '764b7c0645b849fa10f50f2a3450028';
    const clientId = '567b16bdfd23413294483002be41bc0';
    const url = 'http://127.0.0.1:3000/spotify/';    
  let prom =  await this._http.get(url + `${clientId}/${clientSecret}`).toPromise().then((data:any)=>{
    this.token = data.access_token;
    this.tokenType = data.token_type;
  })
  }
}

this is my component

 async   ngOnInit() {
await this.spotifyService.getNewReleases().subscribe((data:any)=>{
    console.log("comp"+data);      
    this.newSongs= data;
    this.loading=false;
  },(err:any)=>{
    console.log("error component");
    this.error=true;
    this.loading=false;
    this.errorMsg = err.error.error.message;
  });  
  }
}

Answer 1

there a many possible solutions. the simplest one would be to remove await this.getToken(); from the ngOnInit and add the following

getQuery(query: string): Observable<any> {
    ...
    if (this.token == null) {
        await this.getToken();
    }
    ....
  }  

Answer 2

My problem was more theory, then read this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function and understand my problem I solved this like this:

service

 token: string;
  tokenType: string;
 async  getQuery2(query: string): Promise<Observable<any>> {

   if(!this.token){
     await this.getToken()
     .then((data: any ) => {
       console.log("ASYNQUERY DATA",{data});
       this.token = data.access_token;
       console.log("ASYNQUERY TOKEN "+this.token);
      this.tokenType = data.token_type;
      
        });
    }
    const url = `https://api.spotify.com/v1/${ query }`;
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', 'Bearer '+this.token);
    console.log("HEADERS",headers);
    return this._http.get(url, { headers });
  }
   async getNewReleases() {
  return  await this.getQuery2('browse/new-releases?limit=20')
  .then((obs : Observable<any>) =>{
      console.log("NEW REALESES", obs);
      return obs.pipe(
        map( data => data['albums'].items )
      );
    }).catch(()=>{
      this.token= null;
      this.getNewReleases();
    });
  }
 async getToken(): Promise<any>{
    const clientSecret  = '764b7c0645b849a10f50f2a3450028';
    const clientId = '567b16bdfd2342942483002be41bc0';
    const url = 'http://127.0.0.1:3000/spotify/';    
    return await this._http.get(url + `${clientId}/${clientSecret}`).toPromise();
  }

component.ts

async ngOnInit() {
  this.error=false;
  this.loading =true;

  // await this.spotifyService.getNewReleases();
  await this.spotifyService.getNewReleases().then((d:Observable<any>)=>{
    console.log("COMOPONENT",d);
    d.subscribe(data=>{
          this.newSongs= data;
    this.loading=false;
    },(err:any)=>{
          this.error=true;
    this.loading=false;
    this.errorMsg = err.error.error.message;
    });
  });

  
  }

however i don't like this code because is a lot but works... if anyone know a way of decrease that please tell me.