如何在 Angular 中等待 http 请求完成？

我一直在构建一个 SPA，前端使用 Angular 4，后端使用 ASP.NET Core 2。基本上，我正在尝试在给定有效令牌的情况下自动续订用户登录名。例如，当我重新加载页面时，我希望 Angular 保持登录状态。我将令牌以及用户对象存储在本地存储上，以便我可以检查一些用户属性（如果他/她登录了）例子）。

我应该如何强制 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）上执行的。提前致谢。

您可以将 Promise 与 async/await 一起使用

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);
}

查看更多：

• Promises https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• async https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
• ES8 异步/等待 https://medium.com/@_bengarrison/javascript-es8-introducing-async-await-functions-7a471ec7de8a
• 异步/等待教程 https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9
• 异步/等待解释 https://tutorialzine.com/2017/07/javascript-async-await-explained