Vue TIL
api 요청 에러 핸들링
- axios response에서 api 요청 결과는 data 속성 안에 담겨져 있다.
//1.
const response = await fetchData();
const data = response.data;
//2.
const { data } = await fetchData();ES6의 해체 문법(destructuring)을 통해서 axios response의 data속성에 쉽게 접근할 수 있다.
- ✨✨✨ API 요청 시 에러 처리 방법 ( async/await의 에러 처리 방법 )
: 실제 애플리케이션을 만들때는 기능보다 에러 처리가 더 중요할 수도 있다.
: try catch 문을 이용해서 에러를 처리
try {
//비즈니스 로직
} catch (error) {
//에러 핸들링할 코드
}: try catch를 활용하여 에러를 핸들링하면 에러가 난 라인을 확인할 수 있기 때문에 디버깅할 때에도 유용하다. ( try catch가 있을 때, 없을 때 비교해보면 차이점이 확연히 나타난다. )
: axios, api의 error 객체에도 접근하기 용이하다.
- catch 문에서 axios Error response에 접근하기
try {
//api 요청
}
catch(error) {
console.log(error.response);
}axios 기본 response 구조와 같은 response객체가 error 객체 안에 들어있다!
- 에러 핸들링 참고
: https://ko.javascript.info/try-catch
✨ 폼 유효성 검사
-
폼 유효성 검사에는 computed 속성을 많이 사용한다.
: 뷰의 Computed 속성은 data, props, store의 변화에 대해서 자동으로 계산해주는 연산식의 역할을 한다. -
이메일 유효성 검사
: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
computed: {
isUsernameValid() {
return validateEmail(this.username);
}
}Computed 속성을 이용해서, username값이 변할 때마다 유효성을 검사한다.
- 유효성 검사 통과 못했을 경우, 버튼을 disabled 처리
<button v-bind:disabled="!isUsernameValid || !password">로그인</button>비밀번호가 입력되지 않았거나, username이 유효하지 않을 경우 disabled 처리한다.
읽은 포스트
사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자