VueJS는 양식 구성 요소의 API 호출 오류를 처리합니다.
P粉964682904
P粉964682904 2023-09-06 22:01:08
0
2
569

사용자가 내 Vue 앱에 등록할 수 있도록 허용하는 간단한 등록 엔드포인트가 있고, 내 백엔드에서 Vue 클라이언트에 적절한 오류를 표시하고 싶습니다.

오류 JSON 구조는 다음과 같습니다:

으아악

다음과 같은 등록 기능이 있는 컴포저블이 있습니다.

으아악

또한 v-모델이 추가된 단순한 양식인 양식 구성요소도 있습니다.

으아악

내 컴포저블에서는 다음과 같이 오류 응답을 로그아웃할 수 있습니다

오류 응답

양식 구성요소에서 오류 등록을 취소하려고 했지만 이제는 빈 객체만 얻습니다(컴포저블에서 이 오류 객체를 처리하기 위해 반응형을 사용하고 있습니다)

구성 가능한 항목의 빈 개체 응답

P粉964682904
P粉964682904

모든 응답(2)
P粉576184933

객체가 아닌 배열을 반환하는 것 같습니다.

액세스 권한을 얻으려면 errors[0].Password을 수행해야 합니다.

객체를 사용할 예정인가요, 아니면 배열을 사용할 예정인가요?(오류가 여러 개인 경우 유용할 수 있음)

배열이 예상되고 모든 오류에 대해 Password 속성을 확인해야 하는 경우 다음과 같이 수행합니다.

으아악
P粉180844619

코드를 반영하세요

오류가 많아 귀하의 요구에 맞는 간결한 답변을 드리기 어렵습니다. 대신에 귀하의 원칙에 따라 작동하는 코드 조각을 빠르게 구성했습니다. 앞으로는 주의해야 할 점을 강조하고 미래를 위한 좋은 조언을 제공하도록 노력하겠습니다.

- async function()可以等待Promise

을 사용한 응답
좋지 않음 (현재 console.log 证明使用async 결과를 즉시 사용하려는 경우)
으아악

즉시 결과를 제공하지는 않습니다. 별도의 스레드에서 실행하는 데 시간이 걸립니다. 결과적으로 JavaScript 스크립트는 거의 즉시 앞으로 나아갑니다. 일반적으로 응답이 아직 도착하지 않았기 때문에 결과를 즉시 사용하려는 경우 오류가 발생합니다.

그래서 접속을 시도하면 errors 的新结果时,您会看到它是空的,即使在 console.log 之后,1-2 秒后,它不会再为空,因为 register()이미 실행된 것입니다.

알았어
으아악

等待 - 프로세스가 끝날 때까지 기다리기 - MDN 문서
异步函数 - 需要什么await 사용 - MDN 문서

- VueJS에서 ref()를 어떻게 사용하나요?

1.

ref()reactive()compulated(), reactive(), compulated() 등으로 저장된 값을 수정할 수 없는 변수에 저장합니다. 이러한 변수를 선언할 때는 항상 const를 사용하십시오.

추가 정보 - StackOverflow 답변

좋지 않아요
으아악
알았어
으아악
2.

한 인스턴스에서는 .value 접미사를 사용하고 다른 인스턴스에서는 사용하지 않습니다. .value 后缀,而在另一实例中则不使用。嗯,情况是 ref() 变量的结果始终存储在 .value 변수의 결과는 항상 .value에 저장됩니다. 그에 맞게 조작하시면 됩니다.

좋지 않아요
으아악
알았어
으아악

사용 방법ref()? - VueJS 문서



논리 개요가 포함된 샘플 코드

코드를 더 잘 이해하기 위해 이 줄에 주석을 달았습니다. 이것이 이해할 수 있기를 바랍니다.

으아악 으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿