javascript async await Submitting a form with onsubmit using Promise

问题

I'm having following code.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function sleep( lf_ms ) {
        return new Promise( resolve => setTimeout( resolve, lf_ms ) );
      }

      async function check_form() {
        alert( 'Test 1' );
        await sleep( 1000 );
        alert( 'Test 2' );

        return false;
      }
    </script>
  </head>
  <body>
    <form name="myform" method="post" action="test.htm" onsubmit="return check_form();">
      <input type="text" name="city"><br>
      <br>
      <a href="javascript:check_form();">check the method call via link</a><br>
      <br>
      <button type="submit">check the method call via submit button</button><br>
      <br>
    </form>
  </body>
</html>

I want to sleep the function check_form() for 1 second.

If I click on the link, "Test 1" and "Test 2" will be displayed. If I click the submit button only "Test 1" is displayed. What am I doing wrong here?

My question is different from Submitting a form with submit() using Promise. Because the javascript event handler onsubmit is not used.

回答1:

The return check_form() does not return false as you might think. Async functions always return an implicit Promise and therefore, your form is still submitted. The first alert shows up because up to that moment it is still synchronous. Everything after the sleep will be scheduled for a later time and the form submission will not wait for that.

To resolve it you can call the function and then return false.

function sleep(lf_ms) {
  return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form() {
  console.log('Test 1');
  await sleep(1000);
  console.log('Test 2');
}

<form name="myform" method="post" onsubmit="check_form(); return false;">
  <input type="text" name="city"><br>
  <br>
  <a href="javascript:check_form();">check the method call via link</a><br>
  <br>
  <button type="submit">check the method call via submit button</button><br>
  <br>
</form>

Edit to address your comment

User input is checked in the function check_form. If the inputs are error-free, the function returns true. If there are errors, the function returns false. In the event of an error, the page that is stored in the attribute action of the tag form should not be called.

You can't pause JavaScript like that, but you can use return false to stop the submission and then after your validation, submit the form via JavaScript.

function sleep(lf_ms) {
  return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form(form) {
  console.log('Test 1');
  await sleep(1000);
  console.log('Test 2');

  let city = document.getElementById('city').value;
  // Validation
  if (form !== undefined && city.trim() !== "") {
    // Validation succeeded, submit the form
    form.submit();
  }
}

<form name="myform" method="post" onsubmit="check_form(this); return false;">
  <input type="text" id="city" name="city"><br>
  <br>
  <a href="javascript:check_form();">check the method call via link</a><br>
  <br>
  <button type="submit">check the method call via submit button</button><br>
  <br>
</form>

来源：https://stackoverflow.com/questions/57790944/javascript-async-await-submitting-a-form-with-onsubmit-using-promise

标签

javascript

promise

async-await

onsubmit