Angularで非同期処理によって取得した値が格納されるのを待ってから、後続の処理を実行したい

Question

###前提
AngularでWebアプリを開発している中での質問です。（超初心者です。）

test.component.tsではAngularのHttpClientを利用して
外部ネットワークに格納されているpageSize配列の0番目を取得し、
TestService側で宣言した"res"に格納しています。（TestService.tsのparamsGetPageSize）

その後、test.component.tsで取得したpageSize配列の0番目が格納された"res"を
TestService.tsのparamsGet関数で利用します。

###意図
TestService.tsのコードを見ていただければ分かる通り、
paramsGetPageSizeとParamsGetは
postParam = postParam.set('pageSize', ＊＊＊);の＊＊＊部分が固定値か、変数か以外に違いはありません。
pageSizeのような環境変数は外部に置いておき、それを読み込むようにしたいという意図があり、
pageSizeを読み込むための関数は固定値（仕方なし）、それ以外でparamsGet関数を利用する場合は、
取得した変数を用いる、という処理にしています。

このparamsGet関数は様々な場面で利用されます。

###質問
非同期なのが原因かと思いますが、test.component.tsで取得したpageSizeがresに格納される前に
TestService.tsのparamsGetが実行されてしまうため、resがundefinedのまま処理が進んでしまいます。

paramsGetが実行されるとき、resがundefinedの場合は値が格納されるのを待って処理を開始する、という方法があればご教授いただけないでしょうか。

よろしくお願いいたします。

###urlEncoder.ts

import { HttpParameterCodec } from '@angular/common/http';

export class UrlEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
}

###TestService.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { UrlEncoder } from 'urlEncoder.tsのパス';

export class TestService{
  // test.component.tsから取得できるように宣言
  public res = "";
  constructor(private http: HttpClient) { }

  private setRequestParams(): HttpParams{
    let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
    httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
  }

    paramsGetPageSize(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // 固定値を使用
          postParam = postParam.set('pageSize', '100');
          return this.http.get(path, { params: postParam });
    }

    paramsGet(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // test.component.tsで取得したthis.resを利用
          postParam = postParam.set('pageSize', this.res);
          return this.http.get(path, { params: postParam });
    }
};

###test.component.ts

import TestService from {'Service.tsのパス'};

@component{
  略
}

export class TestComponent implements OnInit{
  constructor(
    private test: TestService,
  )

  ngOnInit(){
    this.test.paramsGet('http://------').subscribe(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
      // サービスのプロパティに代入
      this.test.res = this.response;
    } );

   this.test.paramsGet('*******').subscribe(
    処理
   );
  }

}

Answer 1

ngOnInit(){
    this.test.paramsGet('http://------').pipe(
        tap((res) => {
            this.response = res.pageSize[0]
            this.test.res = this.response;
        }),
        mergeMap(() => this.test.paramsGet('*******').pipe(
            tap(() => {
                処理
            })
        ))
    ).subscribe()
}

お察しの通りObservableの処理は非同期のため、二つのObservableをsubscribeした場合、並列に実行されます。
回避するためには、RxJSのmergeMap(またはswitchMapでも可)パイプを用いて、直列実行されるようにしてあげます。

従来subscribeの中で行っていた処理は、tapパイプの中で行うことができます。

Answer 2

こういう書き方もできます。

  async ngOnInit(){
    // awaitで待たせるためにPromise化させる
    await this.test.paramsGet('http://------').toPromise().then(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
      // サービスのプロパティに代入
      this.test.res = this.response;
    } );

   this.test.paramsGet('*******').subscribe(
    処理
   );
  }

ですが、kaito3desuyoさんの回答の方が拡張性(エラー処理の追加)などに優れています。
私の書き方はあくまで「こういう書き方があるんだなー」ぐらいの知見程度にした方がよいかと。