VueJS behandelt Fehler in API-Aufrufen für Formularkomponenten

Question

Ich habe einen einfachen Registrierungsendpunkt, den ich Benutzern ermöglichen möchte, sich in meiner Vue-Anwendung zu registrieren. Außerdem möchte ich dem Vue-Client von meinem Backend aus entsprechende Fehler anzeigen. Die Fehler-JSON-Struktur lautet wie folgt: {"errors":{"Password":["Passwordisrequired","Minimumlengthof8charactersisrequired"],"U

P粉576184933 · Answer

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

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

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

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

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

P粉180844619 · Answer

反思你的代码

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

- 使用`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;
}






  
    
    
      
      
        {{ inputName }}:
        
        
          {{ errorMessage }}
        
      
    
    
    
    
      {{ inputName }}

反思你的代码

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

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

好的

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

1.

不好

好的

2.

不好

好的

具有概述逻辑的示例代码

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

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

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