title: Pausing a function call until an async call completes
body: <p>I have a forward navigation function, which triggers an async API call on certain stages, where it is required that it does not proceed (move forward) until said API call is finished (it triggers a processor in the background required for the following stages).</p>
  <p>My issue is that it continues to proceed, despite the call not yet being completed. I'm confused at to the best and most suggested way to implement this, and would be happy for any advice.</p>
  <p>Code:</p>
  <pre><code> async postData(url = &quot;&quot;, data = {}) {
    const response = await fetch(url, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
      body: JSON.stringify(data),
    });
  },
  
  forwardTicketId(ticketId) {
    const origin = new URL(window.location.href).origin;
    const addr = `${origin}/current_ticket_id`;
    this.postData(`${addr}`, {
      data: ticketId,
    });
  },
  
  goNext() {
    if (this.isRequiredStage) { # this needs to complete before anything else runs
      this.forwardTicketId(this.ticketId);
    }
    this.navGoNext();
  },
  </code></pre>
  <p>How the goNext function is called:</p>
  <pre><code>    &lt;div class=&quot;level-right&quot;&gt;
        &lt;TicketStepsNavButtons
          @goPrev=&quot;goPrev&quot;
          @goNext=&quot;goNext&quot;
        /&gt;
      &lt;/div&gt;
  </code></pre>