Зависимые HTTP-вызовы в услуге angular

Question

Я звоню по защищенному REST API из angular. В этом случае мне нужно получить токен один раз перед вызовом любого API, так как он передается как часть HTTP-заголовка. Но когда я вызываю какую-либо функцию из моего компонента, я получаю app_token как неопределенный. Это связано с асинхронным вызовом token_api c. Следующий вызов получает успех, так как более ранний вызов извлекает значение для токена с сервера.

Я добавил asyn c -await в функцию get_token, но напрасно. Любой совет, как справиться с этой ситуацией.

private app_token;

private getToken(){    
    if (this.token == undefined) {
      console.log("getting new token");
      return this.httpClient.post<Token>(this.TOKEN_API, body, options)
        .pipe(retry(3), catchError(this.handleError))
        .subscribe(data => {
            console.log(data[0].username);
            return this.app_token = data;
        });
    }
}

public getEmployee{
    this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.EMP_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

public getDepartments{
    this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.DEPT_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

Answer 1

Наконец-то я нашел решение этой проблемы. Здесь я использую функции Rx JS Pipe и concatMap для выполнения двух запросов http и передачи результатов одного запроса другому.

  return this.getToken().pipe(
    concatMap((tokenData)=> {
      headers = headers.append('Authorization', 'Bearer ' + this.token.access_token);

      return this.httpClient.get(url, { headers: headers })
        .pipe( retry(3), catchError(this.handleError));
    })
  );

Answer 2

Преобразование наблюдаемого в обещание из getToken() с использованием toPromise():

private getToken(){    
    if (this.token == undefined) {
      console.log("getting new token");
      return this.httpClient.post<Token>(this.TOKEN_API, body, options)
        .pipe(retry(3), catchError(this.handleError))
        .subscribe(data => {
            console.log(data[0].username);
            return this.app_token = data;
        })
        .toPromise();
    }
}

Теперь вы можете легко использовать async / await для этой функции

public async getEmployee{
    await this.getToken();

    const headers = new HttpHeaders()
      .set('Authorization', 'Bearer ' + this.app_token );

    const options = {
      headers: headers
    };

    return this.httpClient.get(this.EMP_API, options)
      .pipe(retry(3), catchError(this.handleError));
}

Примечание: пожалуйста, обращайтесь ошибка, если getToken() не удается получить токен.