angular - http 等待另一个呼叫完成

Question

场景：

• 会员和非会员在同一个页面有不同的内容，例如新闻，用户信息
• “记住我”功能可用
• 加载网站时使用服务器检查本地存储中的令牌以验证用户
• 大多数http请求结果会根据登录状态而有所不同

问题：

• 如何在触发所有 http 请求之前等待用户验证？

http.service.ts 示例代码：

  private isReady = false;

  constructor(private httpClient: HttpClient) {
    this.init();
  }

  // pass local data to check user login status
  // check the token, expired date etc.
  public init() {
    // this.httpClient.post to verify user status
    // this.isReady = true;
  }

  // http get request used in other components
  public get(url) {
    if (this.isReady) {
      return this.httpClient.get<any>(this.apiRoot + url);
    } else {
      // how to wait for init() is done before return in here?
      return this.httpClient.get<any>(this.apiRoot + url);
    }
  }

沙盒示例在这里

标签： angular

Answer 1

你可以这样试试。在应用程序组件中

async ngOnInit() {
    await this.http.init(); // wait until init complete

    // Then call your other things
  }

HttpService.ts

public async init(): Promise<void> {
    await this.httpClient
      .get<any>(this.apiRoot + "assets/user.json")
      .toPromise()
      .then(s => {
        console.log("init completed");
      });
  }

这是代码沙箱链接