포트폴리오랑 이력서에 치이느라 JS문법 복습에 신경을 못 쓰고 있었네요.

JS 비동기 처리에 중요한 Promise 및 async / await에 대해 정리해본 글입니다.

Promise: 비동기 처리용 객체

new Promise((resolve, reject) => {...})의 형태로 Promise를 생성할 수 있습니다.

• Promise의 인수로 들어가는 이 콜백함수를 executor라고 하며, 실제 비동기 작업을 처리하는 부분이라 이런 이름이 붙었습니다.
• 그러니까 setTimeout, fetch와 같은 비동기 작업을 {...} 안에 넣어주면 됩니다.

resolve, reject

일반적으로는 아래처럼 Promise를 반환하는 비동기 함수를 만들어 사용합니다.

한번 숫자에 10을 더하는 비동기 함수를 만들어 볼까요?

function addTen(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof num === "number") {
        resolve(num + 10);				// 성공 시 인수에 결과값 전달
      } else {
        reject("Number형을 입력하세요!");	// 실패 시 인수에 에러 메시지 전달
      }
    }, 2000);
  });
}

기존에는 num + 10을 그대로 반환하게끔 작성했겠지만, 이제 Promise 객체 안에 resolve(num + 10)을 넣고 그걸 반환을 하는 것 같은데요... 그런데 resolve는 무슨 역할일까요?

• executor는 resolve, reject 두 함수를 매개변수로 가집니다
• resolve는 비동기 작업이 성공적으로 완료됐을 때 호출하며, 인수에는 성공 시 표시할 결과값을 전달합니다.
• reject는 비동기 작업이 실패했을 때 호출하며, 인수에는 실패 시 오류 메시지를 전달합니다.
• 언제 resolve, reject를 호출할 지는 함수 짤 때 알아서 잘 생각하셔야 한다는 점에 유의합시다.

then, catch

이렇게 Promise를 반환하는 함수는,then이나 catch 메서드를 이용해 후속 작업 및 예외 처리를 진행할 수 있습니다.

addTen(10)
  .then((value) => {
    console.log(value);
    return addTen(value);
  }) // then 메서드 안에 return 값이 있을 시, 다음 then 메서드의 매개변수로 전달됨
  .then((value) => {
    console.log(value);
    return addTen(value);
  })
  .then((value) => {
    console.log(value);
    return addTen(value);
  })
  .catch((error) => {
    console.log(error);
  }); // 도중에 reject될 시 catch 메서드로 이동

// num = 10 일시 -> 2초 후 20 출력, 4초(2+2) 후 30 출력, 6초(4+2)후 40 출력
// num이 숫자가 아닐시 -> 2초 후 "Number형을 입력하세요!" 출력

• then: 앞선 Promise가 resolve될 때까지 기다리고, 그 결괏값이 매개변수 (value)로 전달됩니다.
  • then 메서드 안에서 또 다른 Promise를 반환할 시, 다음 then은 그 Promise가 resolve될 때까지 기다린 후 값을 전달받습니다.
• catch: 도중에 reject 처리된 Promise가 생길 시, 에러 메시지가 error 매개변수로 전달되고, 이후 체이닝이 종료됩니다.

기존에는 이렇게 10을 더하는 비동기 연산을 3번 할 때, 콜백함수를 3단으로 호출해야 했으나, 그럴 필요가 없어졌습니다! 우와~~ 콜백 지옥에서 탈출했어요.

async, await

.then 메서드를 쓰는게 직관적이지 않은 것 같으면, 조금 더 깔끔한 async, await 키워드를 쓰는 방법도 있습니다.

async

async는 함수를 항상 Promise를 반환하는 비동기 함수로 만들어 줍니다.

• 반환값이 Promise가 아닌 경우 자동으로 resolve된 Promise를 반환합니다.
• 이미 Promise를 반환하면 그런 효과는 없지만... 이따 볼 await를 사용하기 위해선 일단 쓰셔야 합니다.

async function addTen(num) {
  // 반환값이 Promise 객체가 아닌 경우, 이를 결과값으로 가진 fulfilled / promise 객체가 반환되는 효과도 있음
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof num === "number") {
        resolve(num + 10);
      } else {
        reject("Number형을 입력하세요!");
      }
    }, 2000);
  });
}

await, try~catch

await는 async 함수의 Promise가 처리될때까지 기다리고, 결과값을 반환하는 역할입니다. 기존에 then(...)안에서 처리하던 코드를, await를 통해 변수에 저장하고 다음 줄에 바로 사용하는 식으로 변경하실 수 있습니다.

• 단 await는 async 함수 안에서만 쓸 수 있으니 유의합시다.
• .catch() 같은 경우 try~catch를 통한 예외 처리로 변경하시면 됩니다.

async function addThreeTens(num) {
  try {
    const result1 = await addTen(num);
    console.log(result1);
    const result2 = await addTen(result1);
    console.log(result2);
    const result3 = await addTen(result2);
    console.log(result3);
  } catch (error) {
    console.log(error);
  }
}

addThreeTens(10);
// num = 10 일시 -> 2초 후 20 출력, 4초(2+2) 후 30 출력, 6초(4+2)후 40 출력
// num이 숫자가 아닐시 -> 2초 후 "Number형을 입력하세요!" 출력