title: How to wait until all async calls are finished
body: <p>I've got NestJS application which interact with YoutubeAPI and load videos from it.
  One particular method is important and it's <code>loadVideos</code> from below. Method it self has multiple asyncs inside and I need to work with <code>videoIdMap</code> property once everything is finished</p>
  <pre><code>private loadVideos(
      playListId: string,
      channel: Channel,
      nextPageToken: string,
      stopLoadingOnVideoId: string,
    ) {
      const baseUrl = YoutubeService.VIDEO_URL_SNIPPET_BY_ID + playListId;
      const response = this.httpService
        .get(nextPageToken ? baseUrl + '&amp;pageToken=' + nextPageToken : baseUrl)
        .pipe(map((response) =&gt; response.data));
      response.subscribe((data) =&gt; {
        data.items.forEach((item) =&gt; {
          if (stopLoadingOnVideoId &amp;&amp; item.snippet.resourceId.videoId === stopLoadingOnVideoId) {
            return;
          }        
          this.prepareVideoEntity(item.snippet, channel).then((partialVideo) =&gt;              
            this.videoService.create(partialVideo).then((video) =&gt; {     
              this.videoIdMap[video.youtubeId] = video.id;
            }),
          );
        });      
        if (data.nextPageToken) {        
          this.loadVideos(
            playListId,
            channel,
            data.nextPageToken,
            stopLoadingOnVideoId,
          );
        }
      });
    }
  </code></pre>
  <p>Ideal solution for me would be to make <code>loadVideos</code> async somehow so I can later do:</p>
  <pre><code>public methodWhichCallLoadVideos(): void {
    await loadVideos(playListId, channel, null, stopLoadingOnVideoId)
    // My code which have to be executed right after videos are loaded
  }
  </code></pre>
  <p>Every solution I tried out end up with <code>this.videoIdMap</code> to be empty object or with compilation issue so any idea is more than welcome.</p>