获取请求完成前的函数 returns

Question

我的代码似乎在完成获取请求之前返回值。在 'success' 的警报之前，我一直收到 'invalid' 的警报。谁能建议一种方法来解决我的问题？我的完整源代码可以在这里找到：https://github.com/SophalLee/project_04_sophal_lee.git.

registrationForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if(checkInputs()) {
        alert('ok')
        //if(registrationForm.submit();
    }
    else {
        alert('Invalid')
    }
});

/* Validate input from form */
function checkInputs() {

    const firstnameValue = firstname.value.trim();
    const lastnameValue = lastname.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const confirmPasswordValue = confirmPassword.value.trim();

    let firstnameSuccess = false;
    let lastnameSuccess = false;
    let emailSuccess = false;
    let passwordSuccess = false;
    let confirmPasswordSuccess = false;

  ....

    if(emailValue === '') {
        setErrorFor(email, "Email cannot be blank");
        emailSuccess = false;
    }
    else if(!emailCheck(emailValue)) {
        setErrorFor(email, "Invalid email");
        emailSuccess = false;
    }
    else {    
        const options = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ "email": emailValue }),       
         };

        fetch('http://localhost:3000/emailcheck', options)
        .then(response => response.json())
        .then(data => { 
            if(data.match) {
                setErrorFor(email, "Email already exists");
                emailSuccess = false;
            }
            else {
                setSuccessFor(email);
                emailSuccess = true;
                alert('success');
            }

        });
    }

  ....

    return (firstnameSuccess && lastnameSuccess && emailSuccess && passwordSuccess && confirmPasswordSuccess)    
}

Answer 1

您可以使用 Async Await 等待获取请求

registrationForm.addEventListener('submit', (e) => {
  e.preventDefault();
  if (checkInputs()) {
    alert('ok')
    //if(registrationForm.submit();
  }
  else {
    alert('Invalid')
  }
});

/* Validate input from form */
async function checkInputs() {

  const firstnameValue = firstname.value.trim();
  const lastnameValue = lastname.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  const confirmPasswordValue = confirmPassword.value.trim();

  let firstnameSuccess = false;
  let lastnameSuccess = false;
  let emailSuccess = false;
  let passwordSuccess = false;
  let confirmPasswordSuccess = false;


  if (emailValue === '') {
    setErrorFor(email, "Email cannot be blank");
    emailSuccess = false;
  }
  else if (!emailCheck(emailValue)) {
    setErrorFor(email, "Invalid email");
    emailSuccess = false;
  }
  else {
    const options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ "email": emailValue }),
    };

    await fetch('http://localhost:3000/emailcheck', options)
      .then(response => response.json())
      .then(data => {
        if (data.match) {
          setErrorFor(email, "Email already exists");
          emailSuccess = false;
        }
        else {
          setSuccessFor(email);
          emailSuccess = true;
          alert('success');
        }

      });
  }
  return (firstnameSuccess && lastnameSuccess && emailSuccess && passwordSuccess && confirmPasswordSuccess)
}

https://dmitripavlutin.com/javascript-fetch-async-await/

Answer 2

所有异步函数 return Promise 以及周围的 async 函数。所以 checkInputs() 也 returns Promise。为了获得结果，您必须使用 then() 设置回调或使用 await 关键字接收 returned 值。

我在事件侦听器中使用了回调方法。 await 接收电子邮件检查结果的方法 fetch().

请注意，checkInputs() return 是 Promise 实例，在完成异步任务时解析为布尔值。您不能通过调用 if(checkInputs()).

来简单地检查布尔值

registrationForm.addEventListener('submit', (e) => {
  e.preventDefault();
  checkInputs().then(flag => {
    if (flag) {
      alert('ok')
      //if(registrationForm.submit();
    } else {
      alert('Invalid')
    }
  });
});

/* Validate input from form */
async function checkInputs () {

  const firstnameValue = firstname.value.trim();
  const lastnameValue = lastname.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  const confirmPasswordValue = confirmPassword.value.trim();

  let firstnameSuccess = false;
  let lastnameSuccess = false;
  let emailSuccess = false;
  let passwordSuccess = false;
  let confirmPasswordSuccess = false;

  // ....

  if (emailValue === '') {
    setErrorFor(email, "Email cannot be blank");
    emailSuccess = false;
  } else if (!emailCheck(emailValue)) {
    setErrorFor(email, "Invalid email");
    emailSuccess = false;
  } else {
    const options = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ "email": emailValue }),
    };

    emailSuccess = await fetch('http://localhost:3000/emailcheck', options)
      .then(response => response.json())
      .then(data => {
        let emailFlag = false;
        if (data.match) {
          setErrorFor(email, "Email already exists");
          emailFlag = false;
        } else {
          setSuccessFor(email);
          emailFlag = true;
          alert('success');
        }
        return emailFlag;
      });
  }

  // ....

  return (firstnameSuccess && lastnameSuccess && emailSuccess && passwordSuccess && confirmPasswordSuccess)
}

获取请求完成前的函数 returns

Function returns before fetch request completes

javascript

fetch