Ich habe einen einfachen Registrierungsendpunkt, den ich Benutzern ermöglichen möchte, sich in meiner Vue-App zu registrieren. Außerdem möchte ich dem Vue-Client von meinem Backend aus entsprechende Fehler anzeigen.
Die Fehler-JSON-Struktur sieht folgendermaßen aus:
{ "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" ] } }
Ich habe ein Composable mit einer Registerfunktion wie dieser:
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 } }
Ich habe auch eine Formularkomponente, die nur ein einfaches Formular mit hinzugefügten V-Modellen ist:
In meinem Composable kann ich die Fehlerantwort so abmelden
Fehlerantwort
Ich habe versucht, die Registrierung des Fehlers in der Formularkomponente aufzuheben, aber jetzt erhalte ich nur ein leeres Objekt (ich verwende reaktiv, um dieses Fehlerobjekt im Composable zu behandeln)
Leere Objektantwort von zusammensetzbaren Elementen
看起来你正在返回一个数组，而不是一个对象。
因此，要获得访问权限，您需要执行
errors[0].Password。您打算使用对象还是数组（如果您有多个错误，可能会很有用）？
如果该数组是预期的，并且您需要检查
Password属性的所有错误，您将执行如下操作：反思你的代码
其中存在多个错误，使我很难提供适合您需求的简洁答案。相反，我快速整理了一个根据您的原则工作的代码片段。展望未来，我将尽力强调需要注意的事项，并为未来提供一些好的建议。
- 使用
的响应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 文档具有概述逻辑的示例代码
我对这些行进行了注释，以便更好地理解代码。我希望这是可以理解的。
/** ** Need more function for example ** !!! The vue is below !!! */ // CDN Vue Import const { createApp, ref, computed } = Vue // isValideEmail() (JUST EXAMPLE FOR SNIPPET) // Helper function to validate email address function isValidEmail(email) { const emailRegex = /^\S+@\S+\.\S+$/; return emailRegex.test(email); } // AuthService (JUST EXAMPLE FOR SNIPPET) class AuthServiceClass { errors constructor() { this.errors = {}; } register(inputs) { // Reset Errors this.errors = {}; console.log(inputs) // Check the UserName field if (!inputs.userName) { this.errors.UserName = (this.errors?.UserName ?? []).concat("Username is required"); } if (!inputs.userName || inputs.userName.length < 6) { this.errors.UserName = (this.errors?.UserName ?? []).concat("Minimum length of 6 characters is required"); } // Check the EmailAddress field if (!inputs.emailAddress) { this.errors.EmailAddress = (this.errors?.EmailAddress ?? []).concat("Email Address is required"); } if (!inputs.emailAddress || !isValidEmail(inputs.emailAddress)) { this.errors.EmailAddress = (this.errors?.EmailAddress ?? []).concat("Invalid Email Address"); } // Check the Password field if (!inputs.password) { this.errors.Password = (this.errors?.Password ?? []).concat("Password is required"); } if (!inputs.password || inputs.password.length < 8) { this.errors.Password = (this.errors?.Password ?? []).concat("Minimum length of 8 characters is required"); } // Check the ConfirmPassword field if (!inputs.confirmPassword) { this.errors.ConfirmPassword = (this.errors?.ConfirmPassword ?? []).concat("Confirm Password is required"); } // Return with Promise because its just a simulate your really AuthService.register return new Promise((resolve, reject) => { if (this.errors.length !== 0) { reject({ errors: this.errors }); } else { resolve({ success: true, errors: null }); } }); } } // Import AuthService (JUST EXAMPLE FOR SNIPPET) const AuthService = new AuthServiceClass() // Declare useAuth() (JUST EXAMPLE FOR SNIPPET) function useAuth() { const errors = ref({}) const register = async (request) => { await AuthService.register(request) .then(res => { console.log("AuthService Register Successfully Response", res) }) .catch(err => { console.log("AuthService Register Error Response", err) const newErrors = err.errors; errors.value = newErrors }) } return { register, errors } } /** ** !!!!!! ** Here's started vue code snippet */ // Component.vue const app = createApp({ setup() { // Get register() and errors Ref const { register, errors } = useAuth(); // Declare Ref Object for inputs const request = ref({ userName: "", emailAddress: "", password: "", confirmPassword: "", }); // Declare Submit Function (async for Promise check !!!) const handleSubmit = async () => { console.log('') // just log console.log('Detect New Handle') // just log // call register() function with our value of inputs // wait answer by "await" await register(request.value); console.log('HandleSubmit - Check Error List', errors.value) // just log }; // Just Extra Computed Value, not important // return true/false const hasError = computed(() => Object.keys(errors.value).length > 0) return { hasError, errors, request, handleSubmit } }, }).mount('#app').input { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; max-width: 200px; } .error { color: red; }