rules校验需要返回promise的问题

Question

const rule = {
  bucketNameRules() {
    const valid = (rule, value) =>
      new Promise((resolve, reject) => {
        const reg = /^(?![-])[a-z0-9-]{3,63}(?<![-])$/
        if (value.length < 1) {
          reject('名称不能为空')
        }
        if (value.length < 3 || value.length > 63) {
          reject('请输入 3~63 个字符')
        } else if (!reg.test(value)) {
          reject('允许小写字母、数字、短横线（-），且不能以短横线开头或结尾')
        }
        // 调用接口查询是否重复
        bucketNameCheck({
          bucketName: value
        }).then((res) => {
          if (res.available) {
            resolve()
          } else {
            reject('该Bucket已存在，或被其他用户占用')
          }
        })
      })
    return { validator: debounce(valid, 800, false), trigger: 'change', required: true }
  }
}

Warning: callback is deprecated. Please return a promise instead.

validator: debounce(valid, 800, false) debounce之后返回的就不是个Promise对象了?

在加上debounce之前是有效的

Answer 1

validator函数需要返回一个promise，没用debounce前，valid的功能满足validator的要求，但是debounce包裹valid后会返回一个新的函数，你确定这个函数的功能满足validator的要求吗。一般debounce的封装如下，可以看出它返回的匿名函数是没有返回值的

function debounce(callback, time, isImmediate){
  var timer = null;  //初始化timer，作为计时清除依据
  return function() {
    var context = this;  //获取函数所在作用域this
    var args = arguments;  //取得传入参数
    clearTimeout(timer);
    if(isImmediate && timer === null) {
        //时间间隔外立即执行
        fn.apply(context,args);
      timer = 0;
      return;
    }
    timer = setTimeout(function() {
      fn.apply(context,args);
      timer = null;
    }, delay);
  }
}

你的trigger为change，这只会在change的时候触发validator，所以没必要使用debounce，如果非要使用，就需要让debounce返回的函数满足validator的要求