javascript - 是的 - setTimeout 后的异步验证

Question

为了保存申请，下面的代码在用户输入值后使用 setTimeout。如果输入一个新的，超时被取消。

我想确认下面的方法是否正确，因为当超时被清除时，它不会像异步验证函数“test”所期望的那样返回 Promise。

let timeout = null;
const validationSchema = Yup.object({
  name: Yup.string("Enter your name").required("Name is required"),
    .test("checkDuplUsername", "Username already taken", function(value) {
      clearTimeout(timeout);
      if (!value) return true;

      return new Promise((resolve, reject) => {
        timeout = setTimeout(async () => {

          let uname = value.trim().toLowerCase();
          let resp = await fetch('/check_username/' + value;

          resolve(resp.result.length === 0);
        }, 500);
      });
    })
})

标签： javascriptreactjsformikyup

Answer 1

您可以在超时后通过以下方式使用异步验证：

const validationSchema = Yup.object({
  name: Yup.string("Enter your name").required("Name is required")
  .test("checkDuplUsername", "Username already taken", function(value) {
    if (!value) {
      const isDuplicateExists = await checkDuplicate(value);
      console.log("isDuplicateExists = ", isDuplicateExists);
      return !isDuplicateExists;
    }
    // WHEN THE VALUE IS EMPTY RETURN `true` by default
    return true;
  }),
});

function checkDuplicate(valueToCheck) {
  return new Promise(async (resolve, reject) => {
    let isDuplicateExists;

    setTimeout(() => {
      // CHECK HERE FOR DUPLICATE
      if (valueToCheck === "test") {
        isDuplicateExists = true;
        resolve(isDuplicateExists);
      } else {
        isDuplicateExists = false;
        resolve(isDuplicateExists);
      }
    }, 3000)
  });
}