策略模式处理提交时的一些接口校验

1.校验场景

场景一：提交时查询接口判断是否通过，通过则进入第二步，否则提示错误信息。

场景二：提交时查询接口是否弹窗提示，提示框有提示信息，用户选择"继续提交"输入备注，备注内容传入最终提交接口继续下一步，"取消"终止提交。

场景三：提交时调用三方接口并且推送信息，后续保存失败调用三方接口的作废，作废三方数据。

2.实现过程

思路：所有接口统一返回一个标志，为true继续下一步流程，为false中止流程，弹窗提示类的，需要异步操作的，统一返回false,中断流程，用户操作了相关动作，在继续或者取消流程，继续则是当前规则之后的所有流程

定义所有的规则数组

const allRules=[
'vertifyRules',
'tipModalRules',
]//后续新增规则添加在数组里即可

const ALLRULES = ['vertifyRule', 'submitRule', 'cancelRule']
export default {
  methods: {
    // 自定义方法，与数组ALLRULES对应
    async  submitRule(data) { // 接口不通过中断流程的，通过继续的
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code !== 200) {
        result.flag = false
      }
      return result
    },
    async  vertifyRule(data) { // 有弹窗提示的，需要用户操作继续下一步
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code === 200) {
        // 显示弹窗，流程中断
        result.flag = false
      }
      return result
    },

    async  cancelRule(data) { // 接口通过，需要修改数据的
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code === 200) {
        result.data = {...result.data, state: 2}
      }
      return result
    }
  }
}

公用方法调用数组中所有的规则

    // 循环调用所有规则，当前规则不通过阻断
    async ertifyDrugRules (data = { resBuild: {}, rulesMethods: [], cancelMethods: {} }) {
      let continueFlag = true, saveParams = data.resBuild, rulesMethods = data.rulesMethods
      for (let k = 0; k < rulesMethods.length; k++) {
        if (continueFlag) {
          let rulesData = await this[rulesMethods[k]](saveParams)
          continueFlag = continueFlag && rulesData.flag
          if (continueFlag && Object.keys(this.tipModalManageData).length === 0) {
            this.$_cancelDrugRules(saveParams, rulesMethods.splice(0, rulesMethods.length - (k + 1)), data.cancelMethods)
          }
          if ((continueFlag && rulesData.data) || rulesData.resetDataFlag) {
            saveParams = rulesData.data
          }
        } else {
          this.submitLoading = false
          break
        }
      }

      return {
        flag: continueFlag,
        data: saveParams
      }
    }

触发规则

const ALLRULES = ['vertifyRule', 'submitRule', 'cancelRule']
export default {
  methods: {
    // 自定义方法，与数组ALLRULES对应
    async  submitRule(data) { // 接口不通过中断流程的，通过继续的
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code !== 200) {
        result.flag = false
      }
      return result
    },
    async  vertifyRule(data) { // 有弹窗提示的，需要用户操作继续下一步
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code === 200) {
        // 显示弹窗，流程中断
        result.flag = false
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleRules(data, this.getAfterRules('vertifyRule'))
        }).catch(() => {

        })
      }
      return result
    },

    async  cancelRule(data) { // 接口通过，需要修改数据的
      let result = {
        flag: true,
        data: data
      }
      let res = await prescriptionApi.checkRecipeRule(data) // 调用接口校验规则
      if (res.code === 200) {
        result.data = {...result.data, state: 2}
      }
      return result
    },
    // 循环调用所有规则，当前规则不通过阻断
    async ertifyDrugRules (data = { resBuild: {}, rulesMethods: [], cancelMethods: {} }) {
      let continueFlag = true, saveParams = data.resBuild, rulesMethods = data.rulesMethods
      for (let k = 0; k < rulesMethods.length; k++) {
        if (continueFlag) {
          let rulesData = await this[rulesMethods[k]](saveParams)
          continueFlag = continueFlag && rulesData.flag
          if (continueFlag && Object.keys(this.tipModalManageData).length === 0) {
            this.$_cancelDrugRules(saveParams, rulesMethods.splice(0, rulesMethods.length - (k + 1)), data.cancelMethods)
          }
          if ((continueFlag && rulesData.data) || rulesData.resetDataFlag) {
            saveParams = rulesData.data
          }
        } else {
          this.submitLoading = false
          break
        }
      }

      return {
        flag: continueFlag,
        data: saveParams
      }
    },
    // 提交数据
    submitData(resBuild) {
      this.handleRules(resBuild, ALLRULES)
    },
    // 触发规则校验
    async handleRules(resBuild, rules) {
      this.afterRulesData = await this.$_vertifyDrugRules({resBuild: resBuild, rulesMethods: rules})
    },
    // 后续的流程
    getAfterRules(cur) {
      let index = ALLRULES.indexOf(cur)
      return ALLRULES.slice(index + 1)
    }
  }
}

后续有新增的校验，添加校验规则，并且将校验方法名加到数组中即可