[JS] Promise, async, await 정리

[JS] Promise, async, await 정리

Promise

• Promise는 완료(실패하든 성공하든)될 것으로 기대되는 비동기 작업을 나타내는 객체

const asyncTask = new Promise((resolve, reject) => {
  try{
    setTimeout(() => resolve('resolved'), 500);
  } catch(e) {
    reject(e);
  }
});

asyncTask
  .then(result => console.log(result))  // result는 resolve를 통해 전달된 값
  .catch(e => console.log(e));         // e는 reject를 통행 전달된 값

for(let i = 0; i < 10; i++) {
  console.log(i);
}
// 0 ~ 9 숫자가 출력된 후 프로미스가 resolve 됨

• Promise 생성자 내부에서 setTimeout 함수를 통해 500ms 이후에 프로미스가 resolve(성공)된다.
• resolve되기 전에 에러가 발생한다면 promise는 reject(실패)된다.
• 위의 예제 코드에서 Promise객체인 asyncTask는 500ms내에 성공(resolve) 또는 실패(reject)할 것을 '약속'함
• 아직 완료되지 않은 프로미스의 상태는 pending상태라고 함

async/await

• async와 await은 프로미스가 포함된 코드(비동기 코드)를 동기 코드처럼 작성할 수 있도록 도와줌

function getText() {
  return new Promise(resolve => {
    setTimeout(() => resolve('resolved'), 3000);
  });
}

async function asyncFunction() {
  const text = await getText();
  console.log(text);
}
asyncFunction();

• 위의 코드는 프로미스를 반환하는 getText 함수를 호출하면서 await 키워드를 사용함
• 이렇게 프로미스를 await하면 코드의 실행을 멈추고 해당 프로미스가 값을 반환하기를 기다림
• async함수 내에서만 await 키워드를 사용할 수 있고, async함수 또한 프로미스를 반환 함
• 실수로 await 키워드를 빠트린다면 실제 코드가 실행되기 전까지는 에러를 찾기 어려움

예를 들어 다음 코드에서 text는 문자열이 아닌 프로미스 객체

const text = getText();

async/await을 이용한 병렬 처리를 할 때에는 주의가 필요함

function sleep() {
  return new Promise(resolve => {
    setTimeout(resolve, 3000);
  });
}
async function serial() {
  var a = sleep(); //
  await a;         // await sleep();

  var b = sleep(); //
  await b;         // await sleep();
}

async function parallel() {
  var a = sleep();
  var b = sleep();
  await a;
  await b;
}

두 함수는 비슷해 보이지만,

• parallel 함수는 a,b를 즉시 실행하는 반면 serial 함수는 a가 완료된 후 b가 실행 됨
• 프로미스는 생성 즉시 실행 됨
• serial 함수는 첫번째 프로미스를 생성하고 resolve되기를 await한 후 두 번째 프로미스를 기다림
• 반면, parallel 함수는 두 개의 프로미스르 각각 a,b에 할당하고 완료되기를 기다림

출처

• https://soonoo.me/4