执行功能异步角度答案

【问题标题】：Execute functions async angular执行功能异步角度
【发布时间】：2020-08-22 05:29:49
【问题描述】：

我的服务有问题，我需要异步调用函数 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;
  });  
  }
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

有很多可能的解决方案。最简单的方法是从 ngOnInit 中删除 await this.getToken(); 并添加以下内容

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

【讨论】：

我试过做这个但对我没有用，在我不明白之前我不能很好地理解异步函数我可以解决这个阅读......非常感谢兄弟

【解决方案2】：

我的问题是更多的理论，然后阅读这个链接 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();
  }

组件.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;
    });
  });

  
  }

但是我不喜欢这段代码，因为它很多但有效......如果有人知道减少的方法，请告诉我。

【讨论】：