VueJS 处理表单组件上 api 调用的错误

Question

我有一个简单的注册端点，我希望允许用户在我的 vue 应用程序中注册，我还想从我的后端向 vue 客户端显示适当的错误。

错误 JSON 结构如下所示：

{
    "errors": {
        "Password": [
            "Password is required",
            "Minimum length of 8 characters is required"
        ],
        "UserName": [
            "Username is required",
            "Minimum length of 6 characters is required"
        ],
        "EmailAddress": [
            "Email Address is required",
            "Invalid Email Address"
        ],
        "ConfirmPassword": [
            "Confirm Password is required"
        ]
    }
}

我有一个带有这样的寄存器函数的可组合项：

export default function useAuth() {

    let errors = ref({}) 

    const register = (request) => {

        errors = {}
        AuthService.register(request)
            .then(res => {
                console.log("res: "+ res)
            })
            .catch(err => {
                const errList = err.response.data.errors;
                errors = errList
                // Here i'm getting a reponse
                console.log(errors)

            })
    }
    return {
        register, errors
    }
}

我还有一个表单组件，它只是一个添加了 v-models 的简单表单：

<script>
// Imports..
export default {
  components: {},
  setup() {

    const { register, errors} = useAuth();

    const request = {
      userName: "",
      emailAddress: "",
      password: "",
      confirmPassword: "",
    };


    const handleSubmit = () => {
        register(request);
        // empty object
        console.log(errors)
      
    };

    return {
      errors,
      request,
      handleSubmit
      
    };
  },
};
</script>

在我的可组合项中，我可以像这样注销错误响应

错误响应

我尝试在表单组件中注销错误，但现在我只是得到一个空对象（我正在使用反应式来处理可组合项中的此错误对象）

来自可组合项的空对象响应

Answer 1

看起来你正在返回一个数组，而不是一个对象。

因此，要获得访问权限，您需要执行errors[0].Password。

您打算使用对象还是数组（如果您有多个错误，可能会很有用）？

如果该数组是预期的，并且您需要检查 Password 属性的所有错误，您将执行如下操作：

errors.find(err => !!err.Password).Password

Answer 2

反思你的代码

其中存在多个错误，使我很难提供适合您需求的简洁答案。相反，我快速整理了一个根据您的原则工作的代码片段。展望未来，我将尽力强调需要注意的事项，并为未来提供一些好的建议。

- 使用async function()可以等待Promise

的响应

不好（如果您想立即使用结果，目前 console.log 证明使用async）

// YOUR CODE
const handleSubmit = () => {
  register(request); // call PROMISE () 
  // empty object
  console.log(errors)
};

这并不能立即提供结果；它需要一些时间在单独的线程上运行。结果，JavaScript 脚本几乎立即向前移动。通常，如果您想立即使用结果，这将导致错误，因为响应尚未到达。

因此，当您尝试访问 errors 的新结果时，您会看到它是空的，即使在 console.log 之后，1-2 秒后，它不会再为空，因为 register() 已经执行完毕。

好的

// SUCCESSFULLY USING
const handleSubmit = async () => {
  await register(request); // call PROMISE () AND WAIT response by await
  // empty object
  console.log(errors)
};

等待 -等待进程结束 - MDN 文档
异步函数 - 需要什么await 使用 - MDN 文档

- 如何在 VueJS 上使用 ref()？

1.

将 ref()、reactive()、compulated() 等保存的值存储在无法修改的变量中。声明这些变量时始终使用 const。

更多信息 - StackOverflow 答案

不好

// YOUR CODE
let errors = ref({})

好的

const errors = ref({})

2.

您在一个实例中使用 .value 后缀，而在另一实例中则不使用。嗯，情况是 ref() 变量的结果始终存储在 .value 中。您可以相应地操纵它。

不好

// YOUR CODE
let errors = ref({})

// and...
errors = {...}

好的

const errors = ref({})

// and...
errors.value = {...}

如何使用 ref()？ - VueJS 文档

---

具有概述逻辑的示例代码

我对这些行进行了注释，以便更好地理解代码。我希望这是可以理解的。

雷雷 雷雷 雷雷