Vue VeeValidate - 如何处理异常是自定义验证答案

【问题标题】：Vue VeeValidate - How to handle exception is custom validationVue VeeValidate - 如何处理异常是自定义验证
【发布时间】：2020-03-10 04:44:43
【问题描述】：

我在 VeeValidate 中对欧盟增值税号进行了自定义验证。它连接到我们的 API，后者将其路由到 VIES 网络服务。但是这个 web 服务非常不稳定，并且会发生很多错误，导致 500 响应。现在，当发生错误时我返回 false，但我想知道是否有办法警告用户出现问题而不是说值无效？

Validator.extend('vat', {
  getMessage: field => 'The ' + field + ' is invalid.',
  validate: async (value) => {
    let countryCode = value.substr(0, 2)
    let number = value.substr(2, value.length - 2)
    try {
        const {status, data} = await axios.post('/api/euvat', {countryCode: countryCode, vatNumber: number})
        return status === 200 ? data.success : false
    } catch (e) {
        return false
    }
  },
}, {immediate: false})

编辑：使用 try-catch 更改代码。

【问题讨论】：

标签： vuejs2 vee-validate

【解决方案1】：

你可以使用：

try {
  your logic
}
catch(error) {
  warn user if API brokes (and maybe inform them to try again)
}
finally {
 this is optional (you can for example turn of your loader here)
}

在您的情况下，try catch finally 块将进入 validate 方法

【讨论】：

是的，我已经这样做了。尽管如此，它仍然没有给我一种显示有关异常的消息的方法。当发生异常时，我需要给他们一个单独的警告，否则他们只会认为这是一个无效值，尽管它可能不是。
您想如何通知用户 API 损坏？是否要修改验证消息？
我认为修改验证消息可能是最好的主意

【解决方案2】：

好的，首先我不认为在表单验证错误消息中通知用户 API 损坏是一个好主意 :-| （我会使用小吃店或类似的东西；））

无论如何，也许这会对你有所帮助：

我想你正在创建的钩子中扩展你的表单验证，所以也许有条件地将消息传递给变量会起作用。试试这个：

 created() {
+  let errorOccured = false;
   Validator.extend('vat', {
-    getMessage: field => 'The ' + field + ' is invalid.',
+    getMessage: field => errorOccured ? `Trouble with API` : `The ${field} is invalid.`,
     validate: async (value) => {
       let countryCode = value.substr(0, 2)
       let number = value.substr(2, value.length - 2)
       const {status, data} = await axios.post('/api/euvat', {countryCode: countryCode, vatNumber: number})
+      errorOccured = status !== 200;
       return status === 200 ? data.success : false;
     },
   }, {immediate: false})
 }

【讨论】：

扩展发生在 vee-validate 的单独文件中，因为我需要在项目的多个位置使用它。谢谢你的帮助！经过大量搜索，我什至找到了一个更好的方法，我也会给出答案。

【解决方案3】：

经过大量搜索，我找到了执行此操作的最佳方法。您只需要返回一个对象而不是具有这些值的布尔值：

{
  valid: false,
  data: { message: 'Some error occured.' }
}

它将覆盖默认消息。如果要返回带有默认消息的对象，只需将数据值设置为undefined即可。

【讨论】：

【解决方案4】：

这是一个 veeValidate v3 版本：

import { extend } from 'vee-validate';

extend('vat', async function(value) {

    const {status, data} = await axios.post('/api/validate-vat', {vat: value})
    if (status === 200 && data.valid) {
        return true;
    }
    
    return 'The {_field_} field must be a valid vat number';
});

这假设您的 API 端点返回 json：{ valid: true } 或 { valid: false }

【讨论】：