Angular에서 http 요청이 끝날 때까지 기다리는 방법은 무엇입니까?

Angular에서 http 요청이 끝날 때까지 기다리는 방법은 무엇입니까?

프론트 엔드에 Angular 4를 설치하고 백엔드에 ASP.NET Core 2를 설치했습니다.기본적으로 유효한 토큰이 주어지면 사용자 로그인을 자동으로 갱신하려고 합니다.예를 들어 페이지를 다시 로드할 때 Angular가 로그인 상태를 유지했으면 합니다.일부 사용자 속성(예: 로그인한 경우)을 확인할 수 있도록 토큰을 로컬 스토리지와 사용자 개체에 저장하고 있습니다.

http 요청이 완료될 때까지 기다리려면 어떻게 각도를 강제로 조정해야 합니까?.net get 서비스는 다음과 같습니다.

get<T>(url: string): Observable<T> {
    let options = this.doHeaders();
    return this.doSub(this.http.get(this.doUrl(url), options));
}

private doSub<T>(obs: Observable<Response>) {
    var ob1: Observable<T> = obs.map(this.extractData)
        .catch(this.handleError);

    return ob1;
}

HTTP 요청 코드는 다음과 같습니다.

   getUser() {

    if (this.storage.token == null || this.storage.token == '') {
        return;
    }

    this.net.get<LoginModel>(`Authentication/GetUser`).subscribe(t => {
        this.storage.token = t.token;
        this.storage.user = t.user;
        console.log(this.storage.user);
    });
}

사용자를 확인하는 방법은 다음과 같습니다.

export class StorageService {

    constructor(
        private storage: LocalStorageService
    ) {
    }

    public user: User = null;

    public get isLoggedIn(): boolean {
        return this.user != null;
    }

}

export class IsLoggedIn implements CanActivate {

constructor(
    private storage: StorageService,
    private router: Router
) { }

canActivate(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
) {
    if (this.storage.isLoggedIn) {
        return true;
    }

    this.router.navigate(['account/login'], {
        queryParams: {
            return: state.url,
            message: 'You must be logged in'
        }
    });
    return false;
}}

진짜 문제는 다음과 같습니다.보호된 페이지에서 페이지를 다시 로드할 때마다 Angular는 http가 완료될 때까지 기다리지 않고 로그인 페이지로 리디렉션합니다.몇 초 후에 로그인하지만 이미 리디렉션되었습니다.위 코드는 AppComponent(NgOnInit)에서 실행되고 있습니다.잘 부탁드립니다.

비동기/대기가 포함된 약속을 사용할 수 있습니다.

async getUser() {
    if (this.storage.token == null || this.storage.token == '') {
        return;
    }

    const t = await this.net.get<LoginModel>(`Authentication/GetUser`).toPromise();

    this.storage.token = t.token;
    this.storage.user = t.user;

    console.log(this.storage.user);
}

더 보기:

• 약속들
• 비동기의
• 기다리다
• ES8 비동기/대기
• 비동기식/비동기식 튜토리얼
• 비동기식/비동기식 설명

사용하다.toPromise당신이 관찰할 수 있을 때 그 다음에.async/await.

await this.net.get<LoginModel>(`Authentication/GetUser`).toPromise();

부터.toPromise더 이상 사용되지 않습니다. 두 개의 내장된 정적 변환 함수 중 하나를 사용해야 합니다.firstValueFrom또는lastValueFrom.

그것은 그런 것이어야 합니다.

await firstValueFrom(this.net.get<LoginModel>(`Authentication/GetUser`));

Angular HttpClient에서 반환한 관찰 가능 항목에는 비동기/대기 구문을 사용할 수 없으므로 먼저 관찰 가능 항목을 약속으로 변환해야 합니다.

다행히도 관찰 가능한 인터페이스는 a를 내보냅니다.toPromise()관측 가능한 것으로부터 약속을 반환하는 방법:

await this.net.get<LoginModel>('Authentication/GetUser').toPromise();

Angular Http Client에서 비동기/대기를 사용하는 방법에 대한 다음 예를 참조하십시오.

언급URL : https://stackoverflow.com/questions/48696500/how-to-wait-for-a-http-request-to-finish-in-angular