[자바스크립트] 비동기 처리(콜백, 프로미스 , anync/await)

비동기 처리

• 특정 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 것
• 여러 작업을 동시에 처리하거나 시간이 오래 걸리는 작업을 효율적으로 가능

비동기 처리 구현 방식

• 콜백(callback) 함수
  • 비동기 작업이 완료됬을때 호출되는 함수로, 작업이 완료되면 함수가 실행
  • 비동기 작업의 결과를 처리 가능
  • 콜백 함수를 중첩해서 사용하면 코드의 가독성과 유지 보수성이 떨어질 수 있다.
  • 예시

function fetchData(callback) {
  setTimeout(function() {
    const data = "비동기 데이터";
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log("데이터 처리: " + data);
}

fetchData(processData);

1. fetchData 함수는 2초 후에 "비동기 데이터"를 콜백 함수 processData에 전달
2. processData 함수는 전달받은 데이터를 처리하고 출력.

 

• 프로미스(Promise)
  
  • 비동기 작업의 최종 결과를 나타내는 객체
  • 작업이 성공적을 완료되면 resolve 콜백을 호출하고, 실패하면 reject 콜백을 호출
  • 프로미스를 사용하면 비동기 코드를 구조화하고 중첩 콜백을 피할 수 있다.
  • 예시

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = "비동기 데이터";
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(function(data) {
    console.log("데이터 처리: " + data);
  })
  .catch(function(error) {
    console.error("에러 발생: " + error);
  });

1. fetchData 함수는 2초 후에 "비동기 데이터"를 resolve하는 프로미스를 반환
2. then을 통해 데이터를 처리하고 .catch를 통해 에러를 처리

 

• async/await
  • ES6부터 도입된 문법
  • 비동기 코드를 동기적으로 작성할 수 있게 해준다.
  • async 함수 내에서 await 키워드를 사용하면 프로미스가 처리될 때까지 대기 후 결과를 반환
  • 일반 함수에는 await 사용 불가
  • 비동기 코드를 간결하고 직관적으로 작성 가능
  • 예시

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = "비동기 데이터";
      resolve(data);
    }, 2000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log("데이터 처리: " + data);
  } catch (error) {
    console.error("에러 발생: " + error);
  }
}

processData();

1. fetchData 함수는 2초 후에 "비동기 데이터"를 resolve하는 프로미스를 반환
2. processData 함수는 await 키워드를 사용하여 
   fetchData 함수의 결과를 비동기적으로 대기 후 데이터를 처리하고 출력
3. try-catch 문을 사용하여 에러를 처리

 

비동기 처리의 활용

• 서버로 데이터를 가져와야 할 때, 비동기 처리를 하면 데이터를 가져오는 동안
  페이지는 멈추지 않고 다른 작업을 수행할 수 있다.
• 데이터 요청, 파일 로드, 애니메이션 등 활용