Why does my async fetch call return or exit all the way to the most outer function, execute the outer function, THEN continue executing the inner one?

Question

My code is as such:

document.querySelector('#compose-form').onsubmit = () => {
    const success = send_email();
    if (success === true) {
        setTimeout(() => {load_mailbox('sent'); }, 100);
    }
    return false;
}

the send_email function:

async function send_email() {
    // some code here
    const response = await fetch('/emails', {
            method: 'POST',
            body: JSON.stringify({
                recipients: recipients,
                subject: subject,
                body: body
          })
    })
    // more code here
}

When the .onsubmit is executed, send_email executes and runs smoothly until we reach the fetch call. Running through the debugger, when the whole fetch code block executes, the next step is not to continue through send_email. Instead, the remainder of the .onsubmit event executes without a proper value being assigned to my const success, and only once this is complete does the remainder of send_email run.

My questions are:

What is causing this behavior? I would expect the entirety of send_email to run before continuing with the .onsubmit handler.
What would be the proper way to accomplish what I am going for here, executing the whole of send_email including the API fetch call before completing the later code in the .onsubmit event?

All help is appreciated, thanks!

Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, May 10 '21 at 21:32
Does this answer your question? [Proper way to wait for one function to finish before continuing?](https://stackoverflow.com/questions/21518381/proper-way-to-wait-for-one-function-to-finish-before-continuing) — esqew, May 10 '21 at 21:33
`send_email()` itself is `async`. It’s unclear how you arrived at the conclusion that your execution of your `onsubmit` handler would wait for it to return without the use of the `await` keyword (at the very least) — esqew, May 10 '21 at 21:34
use a promise on `send_email` then handle the success and error cases accordingly. — Pranay Nailwal, May 10 '21 at 21:34
make your `onsubmit` `async` as well, and then `await` the `send_email()` call — U Rogel, May 11 '21 at 07:12

score 0 · Accepted Answer · answered May 10 '21 at 21:48

Try making your onsubmit function asynchronous and then await the results of send_email():

document.querySelector('#compose-form').onsubmit = async () => {
    const success = await send_email();
    if (success === true) {
        setTimeout(() => {load_mailbox('sent'); }, 100);
    }
    return false;
}

If you don't await the result of send_email, it will continue executing the rest of the code of that function synchronously.

Then, you need to actually return something from send_email(). I'm assuming this is in the // more code here part, but it is unclear from your code.

Yes, this is correct. I tried this previously and it seemed to fail -- I am having a separate issue with another part of my code that was making me think that this was the issue. — Jake, May 10 '21 at 21:57

Why does my async fetch call return or exit all the way to the most outer function, execute the outer function, THEN continue executing the inner one?

1 Answers1