title: Waiting for asynchronous functions in Angular 6
body: <p>I need some suggestions in my angular 6 project and tips for best practice.</p>
  
  <p>Below you can see some pseudo code (please ignore any typos) but it's basically what is happening. The project goes through a couple of steps to get new and fresh data and process that before showing the user.
  What I want to do is to make it run through all step 1 until it is finished, then onto step 2, once it is done it goes to step 3 and so on.
  This is because some of the steps require the response from the previous step before they can make their request which means I need to wait for each step to finish before moving on to the next one.
  But I have a little problem with the asynchronous functions.</p>
  
  <pre><code>var token;
  
  mainFunction(){
      step1();
      console.log("Done with step 1");
  
      step2();
      console.log("Done with step 2");
  
      step3();
      console.log("Done with step 3");
  }
  
  step1(){
      console.log("Step 1...");
      var data1 = getData();
      // Does things with data1
  }
  
  step2(){
      console.log("Step 2...");
      var data2 = getData();
      // Does things with data2
  }
  
  step3() {
      console.log("Step 3...");
      var data3 = getData();
      // Does things with data3
  }
  
  async getData(){
      await getAccessToken();
  
      var result;
  
      console.log("Getting data...");
  
      // Makes a request to an API.
      this.http.post("URL", token)
      .map(response =&gt; response.json())
      .toPromise()
      .then((response: any) =&gt; {
          console.log("Got the data!");
  
          // Processing the response
          result = response;
      }
      return result;
  }
  
  async getAccessToken(){
      console.log("Getting access token...");
  
      let accessToken = await getToken(); //Returns a Promise
  
      this.token = accessToken;
      console.log("Got the token!");
  
      return Promise.resolve(true);
  }
  </code></pre>
  
  <p>The problem started with getToken() inside the getAccessToken function. That is an asynchronous function that returns a promise, which means it doesn't wait for the response. No problem, just set an await and it works fine!</p>
  
  <p>But even if the getAccessToken() now waits for the getToken() to finish, getData() doesn't wait for getAccessToken() to finish waiting for getToken(). Solution? I returned a Promise and put await inside getData().
  But I didn't solve the problem I only moved it. </p>
  
  <p>Right now the getData() now waits for the accessToken to be finished before doing the request but step1, step2 and step 3 doesn't wait.
  Is the solution to return a promise all the way and set await on every function? I hope there is a cleaner way to do it and just set await where it actually needs to wait and everything will stop and wait for that to finish.</p>
  
  <p><strong>Is there a clean way of doing that? What is best practice?</strong></p>
  
  <p>This is the output I want:</p>
  
  <ul>
  <li>Step 1...</li>
  <li>Getting acces token...</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  <li>Done with step 1</li>
  <li>Step 2...</li>
  <li>Getting access token...</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  <li>Done with step 2</li>
  <li>Step 3...</li>
  <li>Getting Access token...</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  <li>Done with step 3</li>
  </ul>
  
  <p>This is the output I get:</p>
  
  <ul>
  <li>Step 1...</li>
  <li>Getting access token...</li>
  <li>Done with step 1</li>
  <li>Step 2...</li>
  <li>Getting access token...</li>
  <li>Done with step 2</li>
  <li>Step 3...</li>
  <li>Getting access token...</li>
  <li>Done with step 3</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  <li>Got the token!</li>
  <li>Getting data...</li>
  <li>Got the data!</li>
  </ul>