[책] 자바스크립트 코드 레시피 278 - 198일차

비동기화 Promise 사용하기

• 비동기 처리를 다루고 싶을 때

구문

new Promise(함수) Promise 생성
Promise인스턴스.this(함수) 성공시 콜백 함수 호출

설명

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아집니다. fetch()를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며, await나 async와 같은 기능도 기본적으로 알아 두면 좋습니다.

실습

Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 함수 내부에서 비동기 처리 완료 메소드인 resolve()를 호출합니다. Promise 인스턴스의 then()을 사용해 resolve() 실행 후의 작업을 처리합니다. 다음은 1초 후의 작업을 Promise를 사용해 처리하는 코드입니다.

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(); // resolve() 호출 시 Promise 처리 완료
  }, 1000);
});

promise.then(() => { // then() 으로 다음 작업 처리
  console.log('다음 작업'); // 1초 후 실행
});

---

resolve()의 인수에는 임의의 값 지정이 가능합니다. 다음은 설정한 resolve()의 인수가 then() 내부 처리에 사용되는 샘플입니다.

const promiseWork = new Promise((resolve) => {
  setTimeout(() => {
    resolve('orange');
  }, 1000);
});

promiseWork.then((value) => {
  console.log(value);
});