Javascript Promise

Promise는 비동기 처리를 간단하게 하기 위한 문법과 기능을 제공하는 Javascript의 클래스다. 혹은 이 Promise의 인스턴스(오브젝트) 자체를 부르는 이름이기도 하다.

영어 단어 자체의 의미처럼 미래에서 실행을 약속하는 것 같다는 느낌으로 이해하면 될 것 같다.

아래 예제는 Promise를 이용한 기본적인 비동기 처리와 에러일 경우 처리 코드다.

function doWhat() {
  return new Promise(function(resolve, reject) {
    someAsyncJob(function(result) {
      if (succeed(result)) {
        resolve(result);
      } else {
        reject(new Error("error!"));
      }
    })
  });
}

• new Promise() 를 통해 간단히 Promise 객체가 생성된다.
• Promise의 콜백으로 넘기는 함수에는 두 개의 인자가 있으며 각 성공(resolve) 및 실패(reject) 시 호출해야 할 콜백 인스턴스다.

위의 doWhat() 함수를 호출할 때는 아래처럼 then 을 이용해 비동기 함수의 실행이 끝났을 때의 처리를, catch 를 통해 실패했을 때의 처리를 할 수 있다.

doWhat().then(function(result) {
  console.log("completed with result " + result);
}).catch(function(message) {
  console.log("error: " + message);
});

이렇게 함수를 만들어서 호출하는 것도 좋은 방법이다.

물론 일회성으로 처리하려는 경우에는 굳이 정적 함수를 만들지 않고 바로 Promise 객체에 대고 소리를 지르는(?) 방식도 괜찮을 것 같다.

new Promise(function (resolve, reject) {
  doWhat(function (result) {
    resolve(result);
  });
})
.then(function (result) {
  ...
})
.catch(function (message) {
  ...
});

async 는 함수나 익명 함수 선언 앞에 붙여서 해당 함수가 비동기적으로 동작한다고 선언하는 명령이다.

async function f() {
  return "from f";
}

이렇게 하면 이 함수는 Promise 객체를 반환한다. 따라서 위에서 봤던 것과 동일하게 사용할 수 있다.

f().then(function (message) {
  console.log(message);
});

앞서 살펴본 Promise 객체 처리와 비슷하다.

만약 좀 더 코드를 좀 더 단순하게 만들고 싶다면, 혹은 Promise 객체를 비동기가 아닌 동기로 처리하고 싶다면 await 를 사용할 수 있다. await 는 비동기 처리가 완료될 때까지 기다린다는 선언이다.

async function f() {
  return "from f";
}

async function doWhat() {
  let message = await f();
  console.log(message);
}

위 코드에서 doWhat() 을 실행시키면 콘솔에 from f 라는 메시지가 표시된다.

이렇게 await 를 이용하면 기존의 Promise에 비해 상당히 간편하게 비동기 처리를 할 수 있다.

다만 await 는 async 가 선언된 함수 내에서만 사용할 수 있는 제약이 있다. 당연히 비동기 처리를 동기 시키는 행위는 메인 스레드를 멈추게 할 가능성도 있는 만큼 당연히 비동기화 되어야 할 것이다.