УГЛОВОЙ: понимание того, как ждать ответа

Question

Спасибо, что нашли время посмотреть на это. Я прочитал несколько вопросов о том, как подписаться на ответ, но изо всех сил стараюсь создать его в контексте моей программы.

Здесь я запрашиваю у Okta данные пользователя (достаточно просто). Далее я сопоставляю результаты с массивом, затем назначаю имя пользователя первому значению, а группы пользователей - группам пользователей. Однако, как и ожидалось, Angular запускает этот код до поступления ответа. UserClaims! = Null - это временный интервал для предотвращения ошибок Angular.

Мой конкретный вопрос: как мне структурировать этот запрос с этими переменными?

async ngOnInit() {
this.isAuthenticated = await this.oktaAuth.isAuthenticated();
this.oktaAuth.$authenticationState.subscribe(
  (isAuthenticated: boolean)  => this.isAuthenticated = isAuthenticated
  );

const userClaims = await this.oktaAuth.getUser();


if (userClaims != null) {
this.claims = Object.entries(userClaims).map(entry => ({ claim: entry[0], value: entry[1] }));
this.userName = this.claims[1].value;
this.userGroups = userClaims.groups;

console.log('ADMIN COMPONENT: userName ' + this.userName + ' is a member of : ' + this.userGroups);
}}}

РЕДАКТИРОВАТЬ: Вот обещание

import { Router, NavigationExtras } from '@angular/router';
import { OktaConfig } from '../models/okta.config';
import { UserClaims } from '../models/user-claims';
import { Observable } from 'rxjs';
export declare class OktaAuthService {
    private auth;
    private router;
    private oktaAuth;
    private config;
    private observers;
    $authenticationState: Observable<boolean>;
    // $userState: Observable<boolean>;

    constructor(auth: OktaConfig, router: Router);
    /**
     * Checks if there is an access token and id token
     */
    isAuthenticated(): Promise<boolean>;
    private emitAuthenticationState;
    /**
     * Returns the current accessToken in the tokenManager.
     */
    getAccessToken(): Promise<string | undefined>;
    /**
     * Returns the current idToken in the tokenManager.
     */
    getIdToken(): Promise<string | undefined>;
    /**
     * Returns user claims from the /userinfo endpoint if an
     * accessToken is provided or parses the available idToken.
     */
    getUser(): Promise<UserClaims | undefined>;
    // private emitUserState;
    /**
     * Returns the configuration object used.
     */
    getOktaConfig(): OktaConfig;
    /**
     * Launches the login redirect.
     * @param fromUri
     * @param additionalParams
     */
    loginRedirect(fromUri?: string, additionalParams?: object): void;
    /**
     * Stores the intended path to redirect after successful login.
     * @param uri
     * @param queryParams
     */
    setFromUri(uri: string, queryParams?: object): void;
    /**
     * Returns the referrer path from localStorage or app root.
     */
    getFromUri(): {
        uri: string;
        extras: NavigationExtras;
    };
    /**
     * Parses the tokens from the callback URL.
     */
    handleAuthentication(): Promise<void>;
    /**
     * Clears the user session in Okta and removes
     * tokens stored in the tokenManager.
     * @param uri
     */
    logout(uri?: string): Promise<void>;
    /**
     * Scrub scopes to ensure 'openid' is included
     * @param scopes
     */
    scrubScopes(scopes: string): string;
}

Answer 1

Надеюсь, это немного поможет.Помните, что async / await - это синтаксический сахар для работы с обещаниями, чтобы они были чистыми и «легкими».

Я сделал очень простой пример на https://stackblitz.com/edit/github-ijnmcd Где я звоню танцующему клоуну 3 раза,один с обещанием, другой с асинхронным ожиданием.На примере должно быть легко реализовать ваше решение.

Не забудьте использовать try {} catch (e) {} для обнаружения ошибок с помощью async / await.

Проверьте это: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Кстати, помните, что HttpClient является наблюдаемым, это означает, что вам придется подписаться на него, если вы хотите использовать async / await, вам нужно будет использовать toPromise () вместо subscribe ();

Надеюсь, это поможет.