JS 비동기처리, 콜백 헬

비동기 함수는 비동기 처리 결과를
1. 함수 외부에 반환할 수 없다.
2. 상위 스코프 변수에 할당할 수 없다.

1. 비동기 처리 결과를 함수 외부로 반환할 수 없다.

// GET요청 비동기
const get = url => {
   const xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.send();
  
  xhr.onload = () => {
    if (xhr.status === 200){
      // 1️⃣ 서버의 응답을 반환한다.
      return JSON.parse(xhr.response);
    }
      console.error(xhr.statusText);
  };
};


const response = get('api주소...') // get 함수 호출
console.log(response); // 2️⃣ undefined

2. 비동기 처리 결과를 함수 외부 변수(상위 스코프 변수)에 할당할 수 없다.

let response; // 전역변수


// 비동기
const get = url => {
   const xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.send();
  
  xhr.onload = () => {
    if (xhr.status === 200){
      // 1️⃣ 서버의 응답을 상위 스코프의 변수에 할당
      response = JSON.parse(xhr.response);
    }else{
      console.error(xhr.statusText);
    }
  }
}


get('api주소...')
console.log(response); // 2️⃣ undefined

get함수 내부의 xhr.onload 이벤트 핸들러는 항상 2️⃣ console.log가 종료한 이후에 호출된다.
즉 2️⃣가 호출될 때에는 아직 전역 변수 response에 서버 응답 결과(JSON.parse(xhr.response))가 할당되기 이전이다.

그러므로
비동기 함수는 비동기 처리 결과를
1. 함수 외부에 반환할 수 없다.
2. 상위 스코프 변수(함수 외부 변수)에 할당할 수 없다.

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

• 비동기 처리결과에 대한 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적이다.
• 비동기 처리가 성공하면 호출될 콜백함수 & 실패하면 호출될 콜백 함수를 전달한다.

// 비동기
const get = url => {
   const xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.send();
  
  xhr.onload = () => {
    if (xhr.status === 200){
      // 서버 응답을 콜백 함수의 인수로 전달하면서 호출하여 응답에 대한 후속처리 함
      successCallback(JSON.parse(xhr.response))
    }else{
      // 에러 정보를 콜백 함수의 인수로 전달하여 에러처리
      failureCallback(xhr.status)
    }
  }
}
 

// 서버 응답에 대한 후속처리를 위한 콜백함수를 비동기 함수 get의 매개변수로 전달
get('url', console.log, console.error)

⚠️ 여기서 발생하는 문제점:
비동기 처리 결과를 콜백 함수로 후속 처리 → 콜백 함수 호출 중첩, 복잡도 높아짐 = "콜백 헬"