비동기 처리의 단점

비동기 처리의 경우 Web API로 들어오는 요청 순서가 아닌, 작업이 완료되는 순서에 따라 처리된다는 특징이 있다.

이 경우 실행과정을 예상할 수 없어 코드의 실행 순서가 불명확해진다는 단점이 생김.

이 경우 Callback 함수를 사용하면 순서를 명확히 할 수 있음

Callback

• 다른 함수의 인자로 전달되는 함수
• 동기, 비동기 구분없이 사용 가능
• 비동기 작업이 완료된 후 실행할 작업을 명시하는데 사용되는 콜백함수를 비동기 콜백(Asynchronous callback)이라 부름

Callback 함수를 사용하는 이유

• 명시적인 호출이 아닌 특정한 조건 혹은 행동에 의해 호출되도록 작성할 수 있음
• 비동기 처리를 순차적으로 동작할 수 있게 함

Callback Hell(콜백 지옥)

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

• 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어, 코드의 들여쓰기 수준이 깊어지는 현상
  • 코드 작성 형태가 마치 피라미드와 같다고 하여 Pyramid of Doom(파멸의 피라미드)라고도 부름
• 비동기 코드를 작성하다 보면 콜백 함수로 인한 콜백 지옥(Callback Hell)은 필연적으로 나타남
• 코드의 가독성을 해치고, 유지보수를 어렵게 만듦

Promise

• Callback Hell 문제를 해결하기 위해 등장한 비동기 처리를 위한 객체
• 비동기 작업의 완료 또는 실패를 나타내는 객체
• 최종 결과를 반환하는 것이 아닌, 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스 인스턴스)을 반환

상태

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

예시

new Promise(function(resolve, reject) {
  // 비동기 작업 수행

  if (성공) {
    resolve(result); // 작업 완료 후 이행 상태로 전환
  } else {
    reject(error); // 작업 실패 후 거부 상태로 전환
  }
})
  .then(function(result) {
		...
  })
  .catch(function(error) {
		...
  })

Promise 인스턴스의 메서드

• then(callback)
  • 요청한 작업이 성공한 경우, callback 실행
  • callback은 이전 작업의 성공 결과를 인자로 전달 받음
• catch(callback)
  • 하나라도 실패한 경우 callback 실행
  • callback은 이전 작업의 실패 객체를 인자로 전달 받음