http 等待另一个呼叫完成

Question

scenario :

• members and non-members have different contents in the same page, eg news, user info
• "remember me" feature is available
• check the token in local storage with server to verify user when website is loaded
• most of http request result will be different based on login status

problem :

• how can I wait for user validation before all http request is triggered?

http.service.ts sample code :

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

sandbox sample is here

Answer 1

You can try like this. In app component

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

This is the code sandbox link