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

我在VeeValidate中对欧盟增值税编号进行了自定义验证。它连接到我们的API，API将其路由到VIES Web服务。然而，这个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更改代码。

您可以使用：

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

方法

您可以使用：

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是一个好主意：-|（我会使用snackbar或类似的东西；）

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

我猜想您正在created hook中扩展表单验证，所以可能可以有条件地将消息传递给变量。试试这个：

 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})
 }

---

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

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

我猜想您正在created hook中扩展表单验证，所以可能可以有条件地将消息传递给变量。试试这个：

 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})
 }

---

在搜索了很多之后，我找到了最好的方法。您只需返回一个对象，而不是具有以下值的布尔值：

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

---

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

undefined

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

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

---

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

undefined

以下是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}

以下是用于此的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}

是的，我已经这样做了。但它仍然没有给我一种方式来显示有关异常的消息。当异常发生时，我需要给他们一个单独的警告，否则他们会认为这是一个无效值，尽管它可能不是。您想如何通知用户API已损坏？是否要修改验证消息？我认为修改验证消息可能是最好的主意。是的，我已经这样做了。但它仍然没有给我一种方式来显示有关异常的消息。当异常发生时，我需要给他们一个单独的警告，否则他们会认为这是一个无效值，尽管它可能不是。您想如何通知用户API已损坏？是否要修改验证消息？我认为修改验证消息可能是最好的主意vee validate在单独的文件中进行扩展，因为我需要在项目中的多个位置使用它。谢谢你的帮助！在搜索了很多之后，我甚至找到了一个更好的方法，我也会给出答案。扩展发生在vee validate的一个单独的文件中，因为我需要它在项目中的多个位置。谢谢你的帮助！在寻找了很多之后，我甚至找到了一个更好的方法，我也会给出答案。