비동기 처리 방법 3가지

1. 콜백

• 가장 기본적인 비동기 처리방식
• 콜백 함수를 사용해 비동기 작업의 결과를 처리함
• 여러 개의 중첩된 콜백을 사용하면 가독성이 떨어짐
• setTimeout(), 이벤트 처리 함수 등…

function fetchData(callback) {
  setTimeout(function() {
    callback('Data received');
  }, 1000);
}

fetchData(function(data) {
  console.log(data);
});

2. Promise

• 콜백 지옥과 같은 문제를 해결하기 위한 목적으로 등장
• 비동기 작업이 성공 또는 실패했을 때의 상태를 나타냄

  • Pending: 아직 결과 값이 반환되지 않은 진행 중인 상태

  • fulfilled: 성공

  • rejected: 실패

  • settled: 결과 값이 성공 혹은 실패로 반환된 상태

    ⇒ settled된 값은 재실행 될 수 없다.

• 성공 시 resolve 콜백을 호출하고, 실패 시 reject 콜백을 호출함
• .then()과 .catch()를 사용해 비동기 작업의 결과를 처리함
  • then 메소드는 Promise 객체 반환 → then, catch 메소드 사용가능 → 연속적인 then 메소드 사용 → Promise chaining
  • catch 이후에도 chaining 가능

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

2-1. Promise.all()

• 배열로 된 여러 개의 프로미스들을 인자로 받아 단 하나의 프로미스를 반환함
• 모든 프로미스가 성공적으로 이행되면 결과 배열이 반환되며, 하나라도 실패하면 첫 번째 실패한 프로미스의 결과가 반환

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

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

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

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // ['Promise 1', 'Promise 2', 'Promise 3']
  })
  .catch(error => {
    console.error(error); // 첫 번째 실패한 프로미스의 에러
  });

3. async/await

• 프로미스를 기반으로 동작하며, 비동기 코드를 동기식처럼 작성할 수 있도록 함
• async 함수 내부에서 await 키워드를 사용하여 프로미스가 처리될 때까지 대기하고, 그 결과를 반환함

async function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();