javascript - .then在异步函数返回值之前被调用

我正在尝试从API端点检索authConfig。在我的应用程序组件中，我从服务请求功能。

this.userDetailService.getAuthConfig().then(config => {
      this.oauthService.configure(config);
      this.oauthService.initAuthorizationCodeFlow();
    });

然后在我的服务中，设置auth配置并返回给应用程序组件。我在.then上使用getAuthConfig，因此当我需要它配置oauthService时，配置对象已存在。当我调试它时，我看到.configure被一个空对象调用。为什么在getAuthConfig返回值之前调用configure？

 getEnvs(): Promise<any> {
      return this.http.get('/backend').toPromise();
    }

 async getAuthConfig(): Promise<any> {
      this.getEnvs().then((data) => {
        const env = data.env;
        const authConfig: AuthConfig = {
          loginUrl: env.authorizationEndpoint,
          redirectUri: env.redirectUris,
          clientId: env.clientId,
          scope: '',
          oidc: false
        };
        return (authConfig);
      });
    }

最佳答案

您需要从getAuthConfig返回创建的Promise，以便getAuthConfig的调用方可以正确地等待getAuthConfig中生成的Promise链：

 async getAuthConfig(): Promise<any> {
     return this.getEnvs().then((data) => {
   //^^^^^^
       // ...
     })

您可以在与该类相同的类中的另一个异步方法中使用它：

async whatever() {
  // this will now await for the promise chain
  // within getAuthConfig and return the result
  const authConfig = await this.getAuthConfig();
}

由于getAuthConfig是一个异步函数，您可以选择利用它来清理它：

async getAuthConfig(): Promise<AuthConfig> {
  const { env } = await this.getEnvs();
  return {
    loginUrl: env.authorizationEndpoint,
    redirectUri: env.redirectUris,
    clientId: env.clientId,
    scope: '',
    oidc: false
  };
}