2023년 1월 31일

45.1.1 콜백 헬

45.1.2 에러 처리의 한계

45.1.1 콜백 헬

비동기 처리 결과를 가지고 다른 후속 처리를 수행하기 위해 또다시 비동기 함수를 호출해야 한다면 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상이 발생하는데 이를 콜백 헬(callback hell)이라 한다.

비동기 함수의 동기 처리

비동기 함수의 처리 결과(서버의 응답 등)에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다.

GET요청을 위한 함수를 통해 살펴보자.

get 함수가 서버의 응답 결과를 반환하게 하려면 어떻게 하면 될까?

// GET 요청을 위한 비동기 함수

const get = url => {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.send();

	xhr.onload = () => {
		if (xhr.status === 200) {
			// 서버의 응답을 콘솔에 출력
			console.log(JSON.parse(xhr.response));
		} else {
			console.error(`${xhr.status} ${xhr.statusText}`);
		}
	}
}

// id가 1 인 post를 취득
get('<https://jsonplaceholder.typicode.com/post/1>');
/*
{
	"userId": 1,
	"id": 1,
	"title": "asdfasdf",
	"body": "asdfadsf"
}
*/

get 함수는 비동기 함수다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다.

즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다.

따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다.