vue在输入框防抖的时候rules校验提示问题

Question

问题遇到的现象和发生背景

给rule的valid函数加防抖后，Promise.reject仅仅会在控制台打印，不会在页面上弹出提示

问题相关代码，请勿粘贴截图

bucketNameRules() {
    const valid = (rule, value) =>
      new Promise((resolve, reject) => {
        const reg = /^(?![-])[a-z0-9-]{3,63}(?<![-])$/
        if (value.length < 1) {
          return 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 }
  },

运行结果及报错内容

Uncaught (in promise) ...

求大家帮忙解决！！

Answer 1

改下面的，测试正常

    var timer//////////////////////
    const valid = (rule, value) =>
        new Promise((resolve, reject) => {
            const reg = /^(?![-])[a-z0-9-]{3,63}(?<![-])$/
            if (value.length < 1) {
                return reject('名称不能为空')
            }
            if (value.length < 3 || value.length > 63) {
                reject('请输入 3~63 个字符')
            } else if (!reg.test(value)) {
                reject('允许小写字母、数字、短横线（-），且不能以短横线开头或结尾')
            }
            // 调用接口查询是否重复
            clearTimeout(timer);//////////////////////
            timer = setTimeout(() => {

////////////////////////////////////////////ajax模拟代码，注意删除
                setTimeout(() => {
                    var v = Math.random()
                    if (v > .5) resolve(`resolve-${v}`);
                    else reject(`reject-${v}`)

                }, Math.random() * 2);
                return;
////////////////////////////////////////////ajax模拟代码，注意删除

                bucketNameCheck({
                    bucketName: value
                }).then((res) => {
                    if (res.available) {
                        resolve()
                    } else {
                        reject('该Bucket已存在，或被其他用户占用')
                    }
                })
            }, 800);
        });
//直接配置为valid，对接口部分防抖
////return { validator: valid, trigger: 'change', required: true }

    valid({}, 'aa').then(res => console.log('aa'+res)).catch(res => console.log('aa'+res))
    valid({}, 'abcde').then(res => console.log('abcde'+res)).catch(res => console.log('abcde'+res))
    valid({}, 'abcde').then(res => console.log('abcde'+res)).catch(res => console.log('abcde'+res))
    valid({}, 'abcde').then(res => console.log('abcde'+res)).catch(res => console.log('abcde'+res))