title: Wait for multiple http requests to finish before running a function in angular
body: <p>I have multiple http posts that fetches JSON data from a MySQL database. I want a function to listen to all of them and run the next piece of code once all of them returned that data has been received.</p>
  
  <p>I've tried multiple variations of async with await, but the function doesn't appear to wait for the HTTP post to finish.</p>
  
  <p>I've got a risk service risk.service.ts to get the riskTable for instance:</p>
  
  <pre><code>getRiskTable(): Observable&lt;Risk[]&gt; {
      return this.http.get(`${this.baseUrl}/getRiskTable`).pipe(
        map((res) =&gt; {
          this.riskTable = res['data'];
          return this.riskTable;
        }),
        catchError(this.handleError));
    }
  </code></pre>
  
  <p>On my Dashboard I call this code:</p>
  
  <pre><code>getRiskTable():any {
      return this.riskService.getRiskTable().subscribe(
        (res: []) =&gt; {
          this.riskTable = res; // the value is correctly captured here
          return true;
        },
        (err) =&gt; {
          this.error = err;
        }
      );
    }
  </code></pre>
  
  <p>And then an async function that runs multiple of these functions, in theory it's suppose to wait until all the functions complete and then log the value. But for some reason the global variable this.riskTable is undefined in this function. </p>
  
  <pre><code>async getAllData(){
      let riskTable = await this.getRiskTable();
      let risks = await this.getAllRisks();
  
      console.log(riskTable); //This returns stuff
      console.log(risks);
      console.log(this.riskTable); //This returns undefined even though it was set in getRiskTable
    }
  </code></pre>
  
  <p>Please any pointers - I am very new to angular and the complexity of this has me completely stumped. 2 Days and 100x variations to get this to work I am slowly losing my bananas!</p>