Vue 3 재사용 가능한 오류 처리 및 컴포지션 API를 사용하는 "useForm"의 재사용 가능한 handlerSubmit 함수

Question

최근 웹 앱에는 동일한 제출 구조를 가진 양식이 많이 있었습니다.

1. 양식 및 제출 버튼을 isSubmitting변수
에 따라 비활성화합니다.
2. 입력 필드 유효성 검사(우리는 Yup 사용)
3. 검증에 실패하는 경우: isSubmitting 设置回 false + 设置并在输入字段上显示 validationErrors 다시 false로 설정하고 입력 필드에 validationErrors를 설정하고 표시합니다
4. 인증에 성공하면: 양식 데이터가 포함된 게시물 요청을 API로 보냅니다
5. API가 닫히거나 오류를 반환하는 경우 일반 오류를 표시하세요

Vue 3의 구성 API를 사용하여 몇 가지 작업을 시도해 보았습니다.

Login.vue

으아악

useForm.js

으아악

이것은 어느 정도 작동하지만 두 가지가 누락되었습니다. useForm에서 useForm 中，我想等到回调完成（成功或失败）才能将 isSubmitting 设置回 false。承诺是做到这一点的好方法吗？还有更好的方法吗？其次，我想要一种可重用的方法来处理 Login.vue를 다시 false로 설정하기 전에 콜백이 완료될 때까지(성공 또는 실패) 기다리고 싶습니다. 헌신이 이를 수행하는 좋은 방법입니까? 더 좋은 방법이 있나요? 둘째, Login.vue의 오류를 처리하는 재사용 가능한 방법이 필요합니다. 이 문제를 해결하는 방법에 대한 제안 사항이 있습니까?

Answer 1

첫 번째 질문에 대해 - try..catch 语句有第三个名为 finally 的语句，该语句始终在 try 명령문 블록은 완료 후 실행됩니다 .

• https://developer .mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

두 번째 질문에 대답하려면 - 약속은 요청을 보내는 API가 오류 응답을 반환하는 상황을 포함하여 비동기 논리를 처리하는 좋은 방법이며, 그런 다음 이 경우 사용자 경험을 처리하는 방법을 결정할 수 있습니다.

재사용 가능한 방식으로 Login.vue 中的错误是什么意思，但也许您可以简单地将一个空数组道具传递给名为 formErrors 的 useForm 并让您的 useForm.js 发出一个update:modelValueLogin.vue의 오류를 처리한다는 것이 무슨 뜻인지 잘 모르겠지만, 간단히 빈 배열 prop을

formErrors라는 🎜useForm에 전달할 수도 있습니다. 를 선택하고 🎜useForm.js에서 🎜update:modelValue 이벤트를 내보내 양방향 바인딩을 수행하도록 합니다. 🎜