2021.04.01

1. 에러 핸들링

0. async, await을 통해 비동기 로직을 처리할 경우, tryCatch 문을 이용해서 에러를 감지할 수 있다.

1. 중첩된 에러 핸들링

: throw를 통해서 강제로 에러를 발생시킬 수 있고, 다음 catch문에 에러 제어를 넘길 수 있다.

// 1. api.js
export const fetchMovieDetail = async (id) => {
    try {
        const response = await apiRequest();

        return response.data;
    } catch (error) {
		// 1. 최초에 여기서 에러 발생 axios response 객체를 throw
        throw error.response;
    }
};

// 2. store.js
// fetch selected movie data
async FETCH_SELECTED_MOVIE({ commit }, movieId) {
	try {
		const movieData = await fetchMovieDetail(movieId);
		commit("SET_SELECTED_MOVIE", movieData);
	} catch (error) {
		// 2. fetchMovieDetail의  catch문에서 throw한 error 객체를 그대로 전달받는다.
		throw error;
	}
},

// 3. MovieCard.vue
async fetchData() {
	try {
		await this.FETCH_SELECTED_MOVIE(this.movieId);
	} catch (error) {
		// 3. 실제로 에러를 처리할 부분, FETCH_SELECTED_MOVIE에서 throw한 error를 전달받는다.
		console.error(error);
	}
},

✔ 잘 못 했던 점

• 정상적으로 동작하지 않던 코드

// MovieCard.vue
fetchData() {
	try {
		this.FETCH_SELECTED_MOVIE(this.movieId);
	} catch (error) {
		// 3. 실제로 에러를 처리할 부분
		console.error(error);
	}
},

비동기로 동작하는 FETCH_SELECTED_MOVIE 함수에서 발생한 에러를 감지하지 못했다.
이유는, try catch는 async, await을 사용할 때 에러를 감지할 수 있는 수단이고, async, await을 사용하지 않았을 경우에는 .catch()문을 통해서 에러를 감지해야 한다.

• 정상적으로 동작하는 코드

// MovieCard.vue
fetchData() {
	this.FETCH_SELECTED_MOVIE(this.movieId).catch((error) =>
		console.log(error)
	);
},

2. Pub-Sub 패턴을 활용한 함수

if (true) {
	// 1. 영화 데이터 불러오고 무비 카드 열기
	this.fetchMovieData(
		this.movieId,
		this.SET_IS_MOVIE_CARD,
		handleError
	);
}

// 2. 영화 상세 데이터 요청
async fetchMovieData(id, onSuccess, onError) {
	try {
		// 아이디 값이 없을 경우 함수 종료
		if (!id && id !== 0) return;

		await this.FETCH_SELECTED_MOVIE(id);
		// * 기존에 작성했던 코드
		// this.SET_IS_MOVIE_CARD(true);
		onSuccess(true);
	} catch (error) {
		onError(error);
	}
},

fetchMovieData()의 인자로 onSuccess, onError를 전달해서 성공, 실패 시 각각 실행되길 원하는 동작을 지정할 수 있었다.
기존에는 영화 데이터 요청에 성공하면 this.SET_IS_MOVIE_CARD(true)를 호출하고 싶어서 단순히 이 함수를 안에서 실행했지만, 이렇게 되면 나중에 이 함수안에서 다른 동작을 하고 싶을 경우 대응이 쉽지 않을 것 같았다.
따라서, onSuccess, onError 두개의 인자를 만들었고 성공/실패 시 원하는 함수를 전달해서 실행되도록 함수를 수정했다.

참고

1. https://ko.javascript.info/custom-errors
2. https://ko.javascript.info/try-catch
3. https://perade.github.io/blog/await-vs-return-vs-return-await/