How to wait for fetch to be over?

Ask the community
,
1

Hi, I have a lading page with a simple(ish) form. when the form is submitted the data is sent to a 3rd party CRM using REST by the wix-fetch function and I would like the user to receive a real time indication if the submission has been successful or not.

See below pseudo-code

function submitButtonClicked () {
    submitForm()
    console.log("FORM SUBMITTED")
}

async function submit () { 
 await postToCRM (formData)
    console.log("POSTING TO CRM COMPLETED")
}

//Backend module
async function postToCRM (data) {
 //code to compose request and JSON stringfy etc....
 let HttpRes = await fetch(url,request)
    console.log ("REQUEST SENT")
 return httpRes.statusText
}

My problem is that the code is still done as if working with promises, the console shows:
FORM SUBMITTED
POSTING TO CRM COMPLETED
REQUEST SENT

to my understanding it should be:
REQUEST SENT
POSTING TO CRM COMPLETED
FORM SUBMITTED

Please let me know where I’m wrong or if there is another way using promises to block the code from running until the fetch is completed and response is returned.
Thank you

2

Hello siluk,

if you want …

REQUEST SENT
POSTING TO CRM COMPLETED
FORM SUBMITTED

then your first function —> “submitButtonClicked” should look like this…

function submitButtonClicked () {
    submitForm()
    .then(()=>{
        console.log("FORM SUBMITTED")
    })   
}

or…

async function submitButtonClicked () {
    await submitForm()
    console.log("FORM SUBMITTED")
}

I did not test it, just theoretical thoughts. Try it out.