Блог

У меня проблема с моим сервисом, мне нужно вызвать функцию getToken () асинхронно, чтобы она инициализировала переменные token и token_type, они необходимы, чтобы иметь возможность отправлять все запросы к API

это мой сервис

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

это мой компонент

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

существует множество возможных решений. самым простым было бы удалить await this.getToken(); из ngOnInit и добавить следующее

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

Моя проблема была больше в теории, тогда прочитайте эту ссылку https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function и понять мою проблему, я решил это следующим образом:

Обслуживание

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

  
  }
  

однако мне не нравится этот код, потому что его много, но он работает… если кто-нибудь знает способ уменьшить это, пожалуйста, скажите мне.