Promise-表单提交前的必填校验

一、前言

原始表单提交必填校验使用存在一定局限，比如提交的表单包括表格，需要对表格的某些input，可以使用 Promise 辅助下。

// 提交按钮前的必填校验
    submitFormMust () {
      // 得分因素
      if (!this.fractionReason1.length) {
        this.$message.error('得分因素未选择，请完善！')
        return Promise.resolve(false);
      }
      // 分析总结
      if (!this.yForm.analysis) {
        this.$message.error('分析总结为空，请完善！')
        return Promise.resolve(false);
      }
      // 友商分析内容必填
      if (this.bidReviewBcDtos.length == 0) {
        this.$message.error('友商分析项为空，请完善！')
        return Promise.resolve(false);
      } else {
        for (let i = 0; i < this.bidReviewBcDtos.length; i++) {
          const data = this.bidReviewBcDtos[i];
          if (this.yForm.result == '废标') {
            if (
              !data.name ||
              !data.quote ||
              !data.friendlyAdvantages1.length ||
              !data.friendlyAdvantages2.length ||
              !data.commercialAnalysis ||
              !data.data3333 ||
              !data.data2222
            ) {
              this.$message.error(`友商分析项有必填项未填写，请完善！`);
              return Promise.resolve(false);;
            }
          } else {
            if (
              !data.name ||
              !data.quote ||
              !data.friendlyAdvantages1.length ||
              !data.friendlyAdvantages2.length ||
              !data.commercialAnalysis ||
              !data.data3333
            ) {
              this.$message.error(`友商分析项有必填项未填写，请完善！`);
              return Promise.resolve(false);;
            }
          }
        }
      }
      // 都校验通过，return true
      return Promise.resolve(true);
    },
    
    // 提交按钮
    submit () {
      // 校验
      this.submitFormMust()
        .then((valid) => {
          if (valid) {
            this.$emit("submit", this.yForm);
          }
        })
        .catch(err => {
          console.error(err);
        });
    },

二、Promise.resolve()-成功和Promsie.reject()-失败方法

promise.resolve() 是成功状态的Promsie的一种简写方式；一般参数和参数为空的情况下，直接返回一个resolved状态的Promise对象

    Promise.resolve()的本质
    // 它是成功状态的Promsie的一种简写方式
    new Promise(resolve => resolve('foo'));
    // 简写
    Promise.resolve('foo');

<script>
// Promise.resolve()

// 一般参数的传递:（重点）
// 调用Promise.resolve()方法传递的一般参数原封不动地向后传递，由then的第一个处理函数的形参接收
Promise.resolve('true/false').then(data => {
    console.log(data); //输出 true/false
})
 
</script>

三、return Promise.resolve(false)/(true)

return Promise.resolve(false) 和 return Promise.resolve(true) 是将一个布尔值包装在一个解决的 Promise 中并返回。

在这段代码中，Promise.resolve() 方法返回一个以给定值解析的 Promise 对象。因为整个函数是异步的，所以使用 Promise 对象来返回验证的结果，以便在调用该函数时能够在验证完成后获得结果。

return Promise.resolve(false) 表示验证不通过，将 false 包装在一个解决的 Promise 中返回。而 return Promise.resolve(true) 表示验证通过，将 true 包装在一个解决的 Promise 中返回。

通过返回一个 Promise，代码的调用者可以使用 then() 方法来处理验证的结果。比如可以这样使用：

submitFormMust().then(result => {
  if (result) {
    // 验证通过的操作
  } else {
    // 验证失败的操作
  }
});

这样在调用 submitFormMust() 函数后，可以根据返回的 Promise 对象的解决值（true 或 false）来执行相应的操作。