title: Typescript - Promises. Async-Await for calls dependents on another call
body: <p>I'm trying to improved the performance of loading data by executing requests in parallel or any other possible way. I'm new to Javascript / Typescript way of coding. I'm coming from Java.
  Recently, I found about Async-Await and Promises.</p>
  <p>I have two methods. 1st one is independent and executes only one request. 2nd is dependent to another requests' output value (in this case &quot;number&quot; value).</p>
  <p>I am calling these function in this sequence.</p>
  <pre><code>private run(): void {
      this.populatePostTextData(list, 3);
      this.populateCustomerNameData(list, 5);
  }
  </code></pre>
  <p>Below are my concerns:</p>
  <p>Both doesn't seem to run in parallel/simulaneously. It waits for <code>populatePostTextData()</code> to finish (then sets value to DOM), then <code>populateCustomerNameData()</code> (sets value again to DOM)</p>
  <p>The 2nd method has 2 requests. I don't know how else to structure the <code>await</code>. I tried to chain them</p>
  <pre><code>await Service.Current.executeRequest(getNumber).then((response: Response) =&gt; {
      number = response.items[0][&quot;CustomerNumber&quot;];
      console.log(&quot;Customer No retrieved: &quot; + number);
      await Service.Current.executeRequest(getNumber)... 
  }).catch((response: Response) =&gt; {
      console.log(&quot;Error: &quot; + response.errorMessage);
  });
  </code></pre>
  <p>But I get an error on <code>await Service.Current.executeRequest(getNumber)...</code>  that it must be within async because it's nested. It doesn't seem to read it as contained within an async method</p>
  <p>1st Method</p>
  <pre><code>    async populatePostTextData(list: IList, columnNum: number) {
          const columnId = &quot;C&quot; + columnNum;
          for (let i = 0; i &lt; list.getData().getLength(); i++) {
              let referenceOrderNo = list.getData().getItem(i).C1;
              let referenceOrderLine = list.getData().getItem(i).C2;
      
              const request = new Request(&quot;...&quot;);
              let postTextData = {};
              await Service.Current.executeRequest(request).then((response: Response) =&gt; {
                  let postText = response.items[0][&quot;PostText&quot;];
                  postTextData[columnId] = postText;
                  postTextData[&quot;id_&quot; + columnId] = &quot;R&quot; + (i + 1) + columnId;
                  $.extend(list.getData().getItem(i), postTextData);
              }).catch((response: Response) =&gt; {
                  console.log(&quot;Error: &quot; + response.errorMessage);
              });
          }
      }
      
  </code></pre>
  <p>2nd Method
  <code>getNumber</code> should execute first because variable <code>number</code> is used for <code>getName</code></p>
  <pre><code>    async populateCustomerNameData(list: IList, columnNum: number) {
          const columnId = &quot;C&quot; + columnNum;
      
          for (let i = 0; i &lt; list.getData().getLength(); i++) {
              let referenceOrderNo = list.getData().getItem(i).C1;
              let referenceOrderLine = list.getData().getItem(i).C2;
      
              let number = &quot;&quot;;
              const getNumber = new Request(&quot;.../&quot;);
              await Service.Current.executeRequest(getNumber).then((response: Response) =&gt; {
                  number = response.items[0][&quot;CustomerNumber&quot;];
                  console.log(&quot;Customer No retrieved: &quot; + number);
              }).catch((response: Response) =&gt; {
                  console.log(&quot;Error: &quot; + response.errorMessage);
              });
      
              let customerName = {};
              const getName = new Request(&quot;...&quot;);
              getName.setParam(1,number);
              await Service.Current.executeRequest(getName).then((response: Response) =&gt; {
                  const name = response.items[0][&quot;CustomerName&quot;];
                  customerName[columnId] = name;
                  customerName[&quot;id_&quot; + columnId] = &quot;R&quot; + (i + 1) + columnId;
                  $.extend(list.getData().getItem(i), customerName);
              }).catch((response: Response) =&gt; {
                  console.log(&quot;Error: &quot; + response.errorMessage);
              });
          }
      }
  </code></pre>
  <p>I'd appreciate any suggestion or solution</p>
  <p>Thank you.</p>