Promise를 사용하는 방법 - async / await 그리고 promise.all()

 

 

[JavaScript] 비동기 코드를 순차적으로 실행하도록 만드는 패턴들에서 이어지는 내용입니다.

순차적으로 만드는 다양한 패턴들중 가장 많이 사용되는 asnyc / await 와 promise.all()의 동작에 관하여 간단히 정리해 보았습니다.

 

 

# async / awiat

async function processFunctions() {
  try {
    var result1 = await func1();
    var result2 = await func2();
    console.log(result1, result2);
  } catch(error) {
    console.error(error);
  }
}

(1) 함수 앞에 async 라는 예약어를 붙입니다.

(2) 함수 내부에서 순서대로 처리하고 싶은 비동기 메서드 앞에 await를 붙입니다.

단, 이때 await 가 앞에 붙은 비동기 메서드는 반드시 Promise 객체를 반환해야 합니다.

Promise 객체로 만드는법은 아래쪽에 기술.

(3) try, catch를 이용하여 예외처리를 합니다.

처리 과정중 하나라도 오류가 발생하면 catch메서드가 실행됩니다.

 

 

 

# promise.all()

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Promise 2 rejected'));
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 resolved');
  }, 3000);
});

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log('Promise chain complete');
  });

(1) Promise.all() 메서드에 배열로 포함된 함수들의 promise가 모두 완료 되었을때 새로운 promise를 반환합니다.

(2) 이때 Promise.all() 배열에 있는 함수들은 순차적으로 실행되는것이 아닌, 병렬로 실행됩니다.

(3) 실제 함수의 실행 속도와는 달리, 모든 처리가 완료되었다면 Promise.all() 메서드에 작성된 순서대로 then() 메서드에 배열로 전달됩니다. .then() 메서드는 promise 중 하나라도 오류가 발생한다면 실행되지 않습니다.

 

위 과정에선 다음과 같이 나타납니다.

["Promise 1 resolved", "Promise 2 resolved", "Promise 3 resolved"]

 

(4)promise 처리 과정중 하나라도 오류가 발생하게되면 .catch() 메서드가 실행되며, 성공이든 실패든 상관없이 마지막에는 .final,y() 메서드가 실행됩니다.