调用函数返回值是一个promise函数

75 阅读1分钟

image.png

form表单校验函数可以接收一个回调函数

formRef.value.validate(vaild => {
    if (vaild) {
      //表单校验通过,可以继续执行表单提交逻辑
    } else {
      //表单校验不通过
    }
 })

form表单校验函数可以返回Promise

formRef.value
    .validate()
    .then(res => {
      //表单校验通过,可以继续执行表单提交逻辑
    })
    .catch(err => {
      //表单校验不通过
    });

当这个form的校验函数是包在一个函数中,在调用函数的时候,可以捕获到异步的校验结果但是接收一个回调函数的时候,要用一个promise包裹着

//保存前校验form
const checkBeforeSubmitForm = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(vaild => {
      if (vaild) {
        resolve(vaild);
      } else {
        reject(vaild);
      }
    });
  });
 
};

当这个form的校验函数是包在一个函数中,在调用函数的时候,可以捕获到异步的校验结果但是直接返回一个promise:

//保存前校验form
const checkBeforeSubmitForm = () => {
  return formRef.value.validate();  
};

调用这个校验的函数:

resultInfoRef.value
        .checkBeforeSubmitForm()
        .then(res => {
          console.log("form校验通过--", res);
        })
        .catch(err => {
          console.log("form校验不通过", err);
        });