[Vue Dev History] Error 처리에 관한 간단한 포스팅

---

Vue 개발 중 공부내용을 기록하는 포스트 입니다.

---

개요

---

Error 를 처리하는데 필요한 내용을 간단히 포스팅해본다.

Async / Await 에러 처리방안

---

보통 Async / Await 비동기 구조로 개발을 진행하게 되면 중요하게 에러처리이다.

단순하게 axios를 통해 API요청을 하고 그 응답값을 넣는 구조로 개발을 하면 응답이 200이 아닌 실패가 발생했을때 아래와 같은 상황을 마주한다.

async submitForm() {
			const userData = {
				username: this.username,
				password: this.password,
			};
			const { data } = await loginUser(userData);
			console.log(data.user.username);
			this.logMessage = **${data.user.username}로 로그인 되었습니다.**;
			this.initForm();
		},

우리는 이 Error 로그를 보면서 LoginPage.vue 에서 발생한거긴 한데 정확히 어디가 문제인지 가시적으로 알기가 힘들다.

따라서, 에러처리를 try/catch를 통해 개선하면 아래와 같이 문제가 발생한 Line 및 원인에 대해서 조금 더 쉽게 접근할 수 있도록 할 수 있다.

웹 개발을 하면서 에러처리에 대해 가장 중요한 부분은 사용자에게 어떤 문제로 인한 오류인지 나타내 주는 부분일 것이다.

따라서, 이러한 부분을 아래와 같이 화면에 표시해 주는 것이 좋을 것 같다.

		async submitForm() {
			try {
				const userData = {
					username: this.username,
					password: this.password,
				};
				const { data } = await loginUser(userData);
				console.log(data.user.username);
				this.logMessage = **${data.user.username}로 로그인 되었습니다.**;
				this.initForm();
			} catch (error) {
				this.logMessage = error.response.data;
			}
		},