Pausing a function call until an async call completes

Question

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).

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.

Code:

 async postData(url = "", data = {}) {
 const response = await fetch(url, {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 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();
},

How the goNext function is called:

 <div class="level-right">
 <TicketStepsNavButtons
 @goPrev="goPrev"
 @goNext="goNext"
 />
 </div>

Answer 1

Use await in the calls too.

 async postData(url = "", data = {}) {
 const response = await fetch(url, {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify(data),
 });
 // you can return the response if you need it
 return response;
},
forwardTicketId(ticketId) {
 const origin = new URL(window.location.href).origin;
 const addr = `${origin}/current_ticket_id`;
 // return to chain the next promises, you can async/await instead if you don't care about the result
 return this.postData(`${addr}`, { 
 data: ticketId,
 });
},
async goNext() {
 if (this.isRequiredStage) { // this needs to complete before anything else runs
 // await here
 await this.forwardTicketId(this.ticketId); 
 }
 this.navGoNext();
},