Angular 等待变量初始化答案

【问题标题】：Angular Wait until variable has been initializedAngular 等待变量初始化
【发布时间】：2019-03-27 14:22:10
【问题描述】：

我即将为 Web 应用程序创建服务。第一步是通过 REST API 获取令牌。一旦此令牌可用，就应将其作为标头发送以获取更多信息。

我的问题是它在设置变量之前执行函数以获取更多信息。（标题为空，但如果我手动设置令牌，它就可以工作）。

我怎样才能让我的函数等到变量有它的值？

谢谢

gettoken(): void {
this.http.get<InitResponse>('URL' + '/token').subscribe(data => {
    this.token = data.token;
    localStorage.setItem('token', data.token);
    getmoreInfo();
  },
  (err: HttpErrorResponse) => {
    if (err.error instanceof Error) {
      console.log('Client-side error occured.');
    } else {
      console.log('Server-side error occured.');
    }
  }
);

}

【问题讨论】：

你是如何在标头中设置令牌的？
你必须使gettoken异步。只需将其包装成Observable 并返回令牌而不是返回void。

标签： javascript angular typescript

【解决方案1】：

这是我的 getToken 方法：

  getToken(idProfile: string): Observable<boolean> {
    let urlAPIToken: string = urlAPIAuth;

    urlAPIToken += '/token?id_profile=' + idProfile;
    let res = encodeURIComponent(urlAPIToken);   

    return this.http.get(urlAPIToken, { withCredentials: true }).pipe(
      map(result => {    
        let token = result.toString();
        localStorage.setItem('token', token);
        return true;
      }));
  }

而且，为了将它发送到任何请求，我使用了一个拦截器，它在所有 HTTP 请求中发送令牌：

const token = localStorage.getItem(TOKEN_NAME);

      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });

示例：here

【讨论】：

【解决方案2】：

向您的函数添加 async 和 await 以使其异步加载。

https://javascript.info/async-await

以下是练习示例

https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77

棱角分明的^

当你把异步放在函数上时

然后等待它依次运行步骤，这就是异步代码的意思

【讨论】：

感谢您的回答。你能改变我的代码来工作吗？我把Async放在函数前面，可惜没用。
看看他的功能。使用async/await 毫无意义。现在它不返回任何值。他使用RxJs，所以他可以只返回observable，而不是将所有内容都包装在额外的Promise中。
@KarolTrybulec 所说的听起来很真实，但这也只是我之前尝试过的一个建议，它确实有效。所以我只是分享了我的经验。
也许可以试试：this.http.get<InitResponse>('URL' + '/token').subscribe( (async) data => { await this.token = data.token; await localStorage.setItem('token', data.token); await getmoreInfo(); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { console.log('Client-side error occured.'); } else { console.log('Server-side error occured.'); } } );