[Javascript] 비동기 처리 (Promise, async/await)

Promise

Promise는 자바스크립트에서 비동기 작업이 완료되었을 때(또는 실패했을 때) 결과 값을 처리할 수 있게 해주는 객체입니다. Promise는 세 가지 상태를 가집니다:

Pending (대기): 비동기 작업이 아직 완료되지 않은 상태.
Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태.
Rejected (거부): 비동기 작업이 실패한 상태.

구조

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true;
  
  if (success) {
    resolve('성공!'); // 작업 성공 시
  } else {
    reject('실패...'); // 작업 실패 시
  }
});

예시

promise
  .then(result => {
    console.log(result); // '성공!' 출력
  })
  .catch(error => {
    console.log(error); // '실패...' 출력
  });

Promise Chaining

const firstPromise = new Promise((resolve) => {
  setTimeout(() => resolve('첫 번째 비동기 작업 완료'), 1000);
});

const secondPromise = new Promise((resolve) => {
  setTimeout(() => resolve('두 번째 비동기 작업 완료'), 2000);
});

firstPromise
  .then(result1 => {
    console.log(result1);
    return secondPromise; // 다음 Promise 반환
  })
  .then(result2 => {
    console.log(result2); // 첫 번째 작업 후 두 번째 작업 실행
  })
  .catch(error => {
    console.log('에러 발생:', error);
  });

장점

• 콜백 함수 없이 비동기 작업을 처리할 수 있는 직관적인 방법.
• then(), catch(), finally()로 성공, 실패, 완료 처리 구분 가능.

단점

• 여러 개의 비동기 작업을 체이닝할 때 코드가 복잡해질 수 있음.
• 콜백 지옥은 아니지만, 여전히 여러 then 체인을 연결하면 복잡함이 증가.

언제 사용해야 할까?

• 병렬로 비동기 작업을 처리해야 할 때.
• 여러 비동기 작업을 동시에 실행하고, 그 결과를 처리하는 데 초점을 맞출 때

async/await

async/await는 ES2017(ES8)에서 도입된 문법으로, Promise를 더 간결하고 직관적으로 사용할 수 있게 도와줍니다. async 키워드는 함수가 Promise를 반환하는 비동기 함수임을 나타내며, await 키워드는 Promise가 처리될 때까지 기다린 후 결과를 반환받을 수 있도록 합니다.

예시

async function fetchData() {
  try {
    const result1 = await firstPromise;
    console.log(result1);

    const result2 = await secondPromise;
    console.log(result2);
  } catch (error) {
    console.log('에러 발생:', error);
  }
}

fetchData();

장점

• 코드가 동기 처리처럼 읽히기 때문에 직관적이고 가독성이 좋습니다.
• Promise 체이닝보다 깔끔한 코드 작성이 가능.
• 비동기 작업 간에 의존성이 있을 때, 비동기 작업을 순차적으로 처리하기에 적합합니다.

단점

• 여러 개의 비동기 작업을 병렬로 처리할 때는 Promise.all과 같은 별도 처리 방법이 필요합니다.
• await는 Promise가 처리될 때까지 기다리기 때문에, 필요 이상으로 작업이 직렬화될 수 있습니다.

언제 사용해야 할까?

• 비동기 코드를 동기 코드처럼 작성하고 싶을 때.
• 가독성이 중요한 복잡한 비동기 작업을 처리할 때.
• 에러 처리를 명확하게 하고 싶을 때.

Promise와 async/await 함께 사용

async function fetchMultipleData() {
  try {
    const [result1, result2] = await Promise.all([firstPromise, secondPromise]);
    console.log(result1, result2);
  } catch (error) {
    console.log('에러 발생:', error);
  }
}

fetchMultipleData();