发送http请求前校验数据方法的一些思考

我正在参加「掘金·启航计划」

背景

在很多业务场景下，前端在发送请求前都是需要进行参数校验的，例如常见的非空校验（参数不能为空）。 接下来记录一下我的校验函数写法的变化。

1.0版本

这个版本函数的校验逻辑很简单，如果函数return true代表校验通过，如果函数return false代表校验不通过。

/* 传给后端的参数 */
const params = {
  xxx1:'嘻嘻',
  xxx2:''
}
/* 参数校验函数 */
function checkParams(params) {
  if(!params.xxx1){
    message.error('xxx1不能为空')
    return false
  }
  if(!params.xxx2){
    message.error('xxx2不能为空')
    return false
  }
  return true
}
async function submit() {
  // 校验不通过 则return终止函数运行
  if(!checkParams(params)) return
  // 发送请求
  await axios(params)
}

2.0版本

2.0版本写法是受到ElementUI、Ant Design Vue等组件库表单校验的启发，这些表单校验通常会返回一个Promise，以resolve的状态代表校验通过，以rejected的状态代表校验不通过

话不多说，下面开始2.0的写法:

/* 传给后端的参数 */
const params = {
  xxx1:'嘻嘻',
  xxx2:''
}
/* 参数校验函数 */
function checkParams(params) {
  return new Promise((resolve,reject)=>{
    if(!params.xxx1){
      return reject('xxx1不能为空')
    }
    if(!params.xxx2){
      return reject('xxx2不能为空')
    }
    return resolve()
  })
  
}
async function submit() {
  try {
    await checkParams(params)
  } catch (error) {
  // 错误处理，error接收的是reject中的数据
    message.error(error);
    return
  }
  // 发送请求
  await axios(params)
}

思考和总结

对比1.0版本和2.0版本， 我总结了2.0版本有以下两个优点:

1. 减少了很多重复代码，在错误处理方面，1.0版本需要在每个if分支都进行一次message的提示， 而2.0版本只需要在catch中统一处理进行错误处理，比较灵活。
2. 2.0版本后续的维护性更高，因为2.0版本的promise写法很好的支持了有需要异步校验场景，后期迭代起来更加便捷高效。